.resizable-panel-group {
  display: flex;
  width: 100%;
  height: 100%;

  /* Direction */
  &[data-panel-group-direction="vertical"] {
    flex-direction: column;
  }

  .resizable-handle {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 1px;
    outline: none;
    background-color: var(--color-border);

    &::after {
      content: "";
      position: absolute;
      left: 50%;
      inset-block: 0;
      width: var(--spacing);
      transform: translateX(-50%);
    }

    /* Icon */
    & > div {
      display: flex;
      z-index: 10;
      align-items: center;
      justify-content: center;
      width: calc(var(--spacing) * 3);
      height: calc(var(--spacing) * 4);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-xs);
      background-color: var(--color-border);

      & > svg {
        width: calc(var(--spacing) * 2.5);
        height: calc(var(--spacing) * 2.5);
      }
    }

    /* Direction */
    &[data-panel-group-direction="vertical"] {
      width: 100%;
      height: 1px;

      &::after {
        left: 0;
        width: 100%;
        height: var(--spacing);
        transform: translateY(-50%);
      }

      & > div {
        transform: rotate(90deg);
      }
    }

    /* Focus */
    &:focus-visible {
      box-shadow:
        0 0 0 1px var(--color-ring),
        0 0 0 1px var(--color-ring);
    }
  }
}
