$gl-drawer-width: 400px;
$gl-sidebar-width: 290px;
$gl-drawer-scrim-gradient: linear-gradient(
  to bottom,
  var(--gl-color-alpha-0),
  var(--gl-background-color-overlap)
);

.gl-drawer {
  @apply gl-bg-overlap;
  right: 0;
  @apply gl-transition-all;
  position: fixed;
  @apply gl-h-full;
  @apply gl-w-full;
  @apply gl-overflow-y-auto;
  @apply gl-shadow-lg;
  @apply gl-text-base;
  @apply gl-leading-normal;
  @apply gl-flex;
  @apply gl-flex-col;
  border-top-left-radius: var(--gl-drawer-border-radius);
  border-bottom-left-radius: var(--gl-drawer-border-radius);

  .gl-drawer-header-sticky {
    @apply gl-bg-overlap;
    top: 0;
    position: sticky;
  }
}

.gl-drawer-default {
  @include gl-container-width-up(md) {
    width: $gl-drawer-width;
  }

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

.gl-drawer-sidebar {
  @include gl-container-width-up(md) {
    width: $gl-sidebar-width;
  }

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

  .gl-drawer-body > * {
    @apply gl-border-b;
    @apply gl-mx-5;

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

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

.gl-drawer-footer {
  @apply gl-bg-overlap;
  @apply gl-border-t;
  @apply gl-p-5;
}

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

.gl-drawer-footer-sticky {
  bottom: 0;
  position: sticky;
}

.gl-drawer-header {
  @apply gl-border-b;
}

.gl-drawer-title {
  @apply gl-text-heading;
  @apply gl-flex;
  @apply gl-items-center;
  @apply gl-justify-between;

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

.gl-drawer-close-button {
  @apply gl-self-start;
  @apply gl-bg-transparent;
  @apply gl-border-none;
}

.gl-drawer-body {
  @apply gl-grow;
  // 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-shrink {
  overflow-y: auto;
}

.gl-drawer-body-scrim {
  &::after {
    background: $gl-drawer-scrim-gradient;
    content: "";
    bottom: 0;
    @apply gl-pointer-events-none;
    @apply gl-w-full;
    position: fixed;
    @apply gl-h-7;
    border-bottom-left-radius: var(--gl-drawer-border-radius);
  }
}

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

.gl-drawer-enter,
.gl-drawer-leave-to {
  @apply gl-translate-x-full;
}

.gl-drawer-enter-active,
.gl-drawer-leave-active {
  @apply gl-transition-all;
}