@layer components {
  .rs-resizable {
    display: flex;
    min-block-size: 160px;
    border: 1px solid var(--rs-color-border-neutral-faded);
    border-radius: var(--rs-radius-medium);
    overflow: hidden;
    isolation: isolate;
  }

  .rs-resizable[data-direction="column"] {
    flex-direction: column;
  }

  .rs-resizable__pane {
    min-inline-size: 0;
    flex: 1 1 0;
    overflow: auto;
    padding: var(--rs-unit-x4);
  }

  .rs-resizable__handle {
    position: relative;
    z-index: var(--rs-z-index-relative);
    flex: none;
    inline-size: var(--rs-unit-x2);
    cursor: ew-resize;
    background: transparent;
  }

  .rs-resizable[data-direction="column"] .rs-resizable__handle {
    inline-size: auto;
    block-size: var(--rs-unit-x2);
    cursor: ns-resize;
  }

  .rs-resizable__handle::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    inline-size: 1px;
    background: var(--rs-color-border-neutral-faded);
    transform: translateX(-50%);
    transition: background-color var(--rs-duration-fast)
      var(--rs-easing-standard);
  }

  .rs-resizable[data-direction="column"] .rs-resizable__handle::after {
    inset-inline: 0;
    inset-block-start: 50%;
    inline-size: auto;
    block-size: 1px;
    transform: translateY(-50%);
  }

  .rs-resizable__handle:is(:hover, :focus-visible)::after {
    background: var(--rs-color-border-neutral);
  }
}