$handle-height: 4px;
$handle-top-margin: var(--wds-space-200, 8px);
$handle-bottom-margin: var(--wds-space-100, 4px);
$content-margin-bottom: var(--wds-space-padding-vertical-tiny, 12px);
$radius: var(--wds-border-radius-surface-modal, 12px);
$horizontal-margin: var(--wds-space-padding-horizontal-medium, 12px);
$side-backdrop-gap: 48px;

/* the drawer's parts render inside a Radix dialog portal, so the slots are
   flat single-class selectors rather than descendants of a root */
.drawer {
  &__overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    &--backdrop {
      /* stylelint-disable-next-line plugin/use-baseline -- color-mix has a literal fallback color */
      background-color: var(
        --wds-color-fill-surface-modal-backdrop,
        color-mix(in srgb, var(--wsr-color-D10, #000624) 66%, transparent)
      );
    }
  }

  &__handle {
    position: relative;
    margin: $handle-top-margin 0 $handle-bottom-margin;
    width: 100%;
    cursor: grab;
    touch-action: none;
    display: flex;
    justify-content: center;

    &::before {
      content: '';
      display: block;
      width: 44px;
      height: $handle-height;
      background-color: var(
        --wds-color-fill-dark-secondary,
        var(--wsr-color-D70, #eceff3)
      );
      border-radius: 2.5px;
    }

    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: calc(-1 * #{$handle-bottom-margin});
      width: 100%;
      height: 44px;
      touch-action: none;
    }

    &:active {
      cursor: grabbing;
    }
  }

  &__content {
    background-color: var(
      --wds-color-fill-surface-modal,
      var(--wsr-color-D80, #ffffff)
    );
    flex-direction: column;
    border-radius: $radius $radius 0 0;
    height: fit-content;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 var(--wds-shadow-y-300, 12px) var(--wds-shadow-blur-800, 30px)
        0
        var(
          --wds-color-black-100-transparent-10,
          rgba(19, 23, 32, 0.1)
        ),
      0 var(--wds-shadow-y-0, 0) var(--wds-shadow-blur-0, 0) 0
        var(--wds-color-black-100-transparent-0, rgba(19, 23, 32, 0));

    &--margin {
      margin: 0 $horizontal-margin $content-margin-bottom $horizontal-margin;
      border-radius: $radius;
    }
  }

  &__handle--orientation-vertical {
    width: auto;
    margin: 0 $handle-bottom-margin 0 $handle-top-margin;
    align-items: center;
    flex: none;

    &::before {
      width: $handle-height;
      height: 44px;
    }

    &::after {
      top: 0;
      bottom: 0;
      left: 50%;
      right: auto;
      width: 44px;
      height: 100%;
      transform: translateX(-50%);
    }
  }

  &__content--anchor-top {
    top: 0;
    bottom: auto;
    border-radius: 0 0 $radius $radius;
    overflow: hidden;
  }

  &__content--anchor-top &__handle {
    margin: $handle-bottom-margin 0 $handle-top-margin;
  }

  &__content--anchor-top#{&}__content--margin {
    margin: $content-margin-bottom $horizontal-margin 0;
    border-radius: $radius;
  }

  &__content--anchor-start,
  &__content--anchor-end {
    display: flex;
    flex-direction: row;
    top: 0;
    bottom: 0;
    height: auto;
    width: fit-content;
    max-width: calc(100vw - #{$side-backdrop-gap});
    overflow: hidden;
  }

  &__content--anchor-start {
    left: auto;
    right: auto;
    inset-inline-start: 0;
    border-radius: 0;
    border-start-end-radius: $radius;
    border-end-end-radius: $radius;
  }

  &__content--anchor-end {
    left: auto;
    right: auto;
    inset-inline-end: 0;
    border-radius: 0;
    border-start-start-radius: $radius;
    border-end-start-radius: $radius;
  }

  &__content--anchor-start#{&}__content--margin,
  &__content--anchor-end#{&}__content--margin {
    margin: $content-margin-bottom $horizontal-margin;
    border-radius: $radius;
  }

  &__content--anchor-start &__content-inner,
  &__content--anchor-end &__content-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
  }

  &__content--anchor-start &__content-wrapper,
  &__content--anchor-end &__content-wrapper {
    flex: 1;
    min-height: 0;
    max-height: none;
  }

  @supports (outline: none) {
    &__content {
      /* stylelint-disable-next-line plugin/use-baseline */
      outline: none;
    }
  }

  &__content-inner {
    overflow: hidden;
  }

  &__content:not(#{&}__content--resizable) &__content-inner {
    border-top-left-radius: $radius;
    border-top-right-radius: $radius;
  }

  &__content--margin &__content-inner {
    border-bottom-left-radius: $radius;
    border-bottom-right-radius: $radius;
  }

  /* after the two rules above so the reset wins for the directional shapes */
  &__content#{&}__content--anchor-top &__content-inner,
  &__content#{&}__content--anchor-start &__content-inner,
  &__content#{&}__content--anchor-end &__content-inner {
    border-radius: 0;
  }

  &__title {
    border: 0;
    /* stylelint-disable-next-line plugin/use-baseline */
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
  }

  &__content-wrapper {
    max-height: calc(
      100dvh -
        (#{$handle-height} + #{$handle-top-margin} + #{$handle-bottom-margin})
    );
    overflow-y: auto;
    overflow-x: hidden;

    &--margin {
      max-height: calc(
        100dvh -
          (
            #{$handle-height} + #{$handle-top-margin} + #{$handle-bottom-margin} +
              #{$content-margin-bottom} + #{$content-margin-bottom}
          )
      );
    }
  }
}