$gl-drawer-width: 400px;
$gl-sidebar-width: 290px;
$gl-drawer-scrim-gradient: linear-gradient(to bottom, $transparent-rgba, $white);

.gl-drawer {
  right: 0;
  @include gl-transition-medium;
  position: fixed;
  @include gl-h-full;
  @include gl-w-full;
  @include gl-overflow-y-auto;
  @include gl-shadow-lg;
  @include gl-font-base;
  @include gl-line-height-normal;
  @include gl-display-flex;
  @include gl-flex-direction-column;

  .gl-drawer-header-sticky {
    @include gl-bg-white;
    top: 0;
    position: sticky;
  }
}

.gl-drawer-default {
  @include gl-bg-white;
  @include media-breakpoint-up(md) {
    width: $gl-drawer-width;
  }

  .gl-drawer-header,
  .gl-drawer-body > * {
    @include gl-p-5;
  }
}

.gl-drawer-sidebar {
  @include gl-bg-gray-10;
  @include media-breakpoint-up(md) {
    width: $gl-sidebar-width;
  }

  .gl-drawer-header,
  .gl-drawer-body > * {
    @include gl-py-5;
  }

  .gl-drawer-body > * {
    @include gl-mx-5;
  }

  .gl-drawer-header {
    @include gl-px-5;
  }
}

.gl-drawer-footer {
  @include gl-border-t-solid;
  @include gl-border-t-gray-100;
  @include gl-border-t-1;
  @include gl-p-5;
}

.gl-drawer-body-scrim-on-footer {
  &::before {
    background: $gl-drawer-scrim-gradient;
    top: -$gl-border-size-1;
    @include gl-translate-y-n100;
    content: '';
    left: 0;
    position: absolute;
    @include gl-pointer-events-none;
    @include gl-w-full;
    @include gl-h-7;
  }
}

.gl-drawer-footer-sticky {
  @include gl-bg-white;
  bottom: 0;
  position: sticky;
}

.gl-drawer-header {
  @include gl-border-b-solid;
  @include gl-border-b-gray-100;
  @include gl-border-b-1;
}

.gl-drawer-title {
  @include gl-display-flex;
  @include gl-align-items-center;
  @include gl-justify-content-space-between;

  svg {
    @include gl-w-5;
    @include gl-h-5;
    @include gl-vertical-align-middle;
  }
}

.gl-drawer-close-button {
  @include gl-bg-none;
  @include gl-border-none;
}

.gl-drawer-body {
  @include gl-flex-grow-1;
  // prevent safari bug where box shadow is visible
  // above the drawer when hovering interactive elements
  // see https://gitlab.com/gitlab-org/gitlab/-/issues/366558
  background-color: inherit;
}

.gl-drawer-body-scrim {
  &::after {
    background: $gl-drawer-scrim-gradient;
    content: '';
    bottom: 0;
    @include gl-pointer-events-none;
    @include gl-w-full;
    position: fixed;
    @include gl-h-7;
  }
}

.gl-drawer-body > * {
  @include gl-border-b-solid;
  @include gl-border-b-gray-100;
  @include gl-border-b-1;

  &:last-child {
    @include gl-border-none;
  }
}

.gl-drawer-enter-to {
  @include gl-translate-x-0;
}

.gl-drawer-enter,
.gl-drawer-leave-to {
  @include gl-translate-x-100;
}

.gl-drawer-enter-active,
.gl-drawer-leave-active {
  @include gl-transition-medium;
}