.scroll-area {
  position: relative;

  .scroll-area-viewport {
    width: 100%;
    height: 100%;
    transition-property: color, box-shadow;
    transition-duration: var(--default-transition-duration);
    transition-timing-function: var(--ease-in-out);
    border-radius: inherit;
    outline: none;

    /* Focus */
    &:focus-visible {
      outline: 1px solid var(--color-ring);
      box-shadow: 0 0 0 3px
        color-mix(in oklab, var(--color-ring) 50%, transparent);
    }

    .scroll-area-scrollbar {
      display: flex;
      padding: 1px;
      transition-property:
        color, background-color, border-color, text-decoration-color, fill,
        stroke;
      transition-duration: var(--default-transition-duration);
      transition-timing-function: var(--ease-in-out);
      user-select: none;
      touch-action: none;

      /* Orientation */
      &[data-orientation="vertical"] {
        width: calc(var(--spacing) * 2.5);
        height: 100%;
        border-inline-start: 1px solid transparent;
      }

      &[data-orientation="horizontal"] {
        flex-direction: column;
        height: calc(var(--spacing) * 2.5);
        border-block-start: 1px solid transparent;
      }

      .scroll-area-thumb {
        position: relative;
        flex: 1;
        border-radius: var(--radius-rounded);
        background-color: var(--color-border);
      }
    }
  }
}
