$sidebar-width: 228px;
$gradient-height: 36px;
$dark-background: #23263c;
$light-background: var(--wds-color-white, var(--wsr-color-D80, #FFFFFF));
$white: var(--wds-color-white, var(--wsr-color-D80, #FFFFFF));
$black: var(--wds-color-black-100, var(--wsr-color-D10, #000624));

@keyframes sidebar-in-from-left {
  from {
    left: calc(-1 * #{$sidebar-width});
  }

  to {
    left: 0;
  }
}

@keyframes sidebar-in-from-right {
  from {
    left: $sidebar-width;
  }

  to {
    left: 0;
  }
}

@keyframes sidebar-out-to-right {
  from {
    left: 0;
  }

  to {
    left: $sidebar-width;
  }
}

@keyframes sidebar-out-to-left {
  from {
    left: 0;
  }

  to {
    left: calc(-1 * #{$sidebar-width});
  }
}

@keyframes sidebar-in-to-place {
  0% {
    max-height: 0px;
    opacity: 0.1;
  }

  20% {
    opacity: 1;
  }

  100% {
    max-height: 1000px;
  }
}

@keyframes sidebar-in-to-place-delayed {
  0% {
    max-height: 0px;
    opacity: 0.1;
  }

  50% {
    max-height: 0px;
    opacity: 0.1;
  }

  60% {
    opacity: 1;
  }

  100% {
    max-height: 1000px;
    opacity: 1;
  }
}

.sidebar {
  width: $sidebar-width;
  height: 100%;
  position: relative;
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  z-index: 2;
  margin-left: 0;
  margin-right: 0;
  transition-property: margin-left, margin-right;
  transition-duration: 0.6s;

  &--skin-dark {
    background-color: $dark-background;
  }

  &--skin-light {
    background-color: $light-background;
    border-right: 1px solid var(--wds-color-black-600, var(--wsr-color-D60, #DFE5EB));
  }

  &--hidden {
    margin-left: calc(-1 * #{$sidebar-width});
    margin-right: 0;
  }

  :global([dir='rtl']) &--hidden {
    margin-left: 0;
    margin-right: calc(-1 * #{$sidebar-width});
  }

  &__content {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    display: grid;
    grid-auto-flow: column;
  }

  &__slider {
    position: absolute;
    width: $sidebar-width;
    overflow-y: overlay;
    height: 100%;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
  }

  &__slider::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;
  }

  &__slider::-webkit-scrollbar-thumb {
    border-radius: 4px;
  }

  @media (hover: hover) {
    &__slider::-webkit-scrollbar-thumb:hover {
      border-radius: 4px;
    }
  }

  &__slider--skin-dark::-webkit-scrollbar-thumb {
    /* stylelint-disable-next-line plugin/use-baseline */
    background-color: color-mix(in srgb, $white 42%, transparent);
  }

  @media (hover: hover) {
    &__slider--skin-dark::-webkit-scrollbar-thumb:hover {
      /* stylelint-disable-next-line plugin/use-baseline */
      background: color-mix(in srgb, $white 66%, transparent);
    }
  }

  &__slider--skin-light::-webkit-scrollbar-thumb {
    /* stylelint-disable-next-line plugin/use-baseline */
    background-color: color-mix(in srgb, $black 42%, transparent);
  }

  @media (hover: hover) {
    &__slider--skin-light::-webkit-scrollbar-thumb:hover {
      /* stylelint-disable-next-line plugin/use-baseline */
      background: color-mix(in srgb, $black 66%, transparent);
    }
  }

  &__slider-in-from-right {
    animation-name: sidebar-in-from-right;
  }

  :global([dir='rtl']) &__slider-in-from-right {
    animation-name: sidebar-in-from-left;
  }

  &__slider-out-to-right {
    animation-name: sidebar-out-to-right;
  }

  :global([dir='rtl']) &__slider-out-to-right {
    animation-name: sidebar-out-to-left;
  }

  &__slider-in-from-left {
    animation-name: sidebar-in-from-left;
  }

  :global([dir='rtl']) &__slider-in-from-left {
    animation-name: sidebar-in-from-right;
  }

  &__slider-out-to-left {
    animation-name: sidebar-out-to-left;
  }

  :global([dir='rtl']) &__slider-out-to-left {
    animation-name: sidebar-out-to-right;
  }

  &__children-content {
    overflow: hidden;
  }

  &__gradient {
    height: $gradient-height;
    min-height: $gradient-height;
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    pointer-events: none;
  }

  &__gradient--skin-dark {
    background-image: linear-gradient(to bottom, rgba(35, 38, 60, 0), $dark-background);
  }

  &__gradient--skin-light {
    background-image: linear-gradient(
      to bottom,
      var(--wds-color-white-transparent-0, var(--wsr-color-D80-00, rgba(255, 255, 255, 0))),
      $light-background
    );
  }

  &__inner-menu-wrapper-in-to-place {
    animation-name: sidebar-in-to-place;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
    overflow: hidden;
  }

  &__inner-menu-wrapper-in-to-place-after-closing-other {
    animation-name: sidebar-in-to-place-delayed;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
    overflow: hidden;
  }

  &__inner-menu-wrapper-out-of-place {
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
    overflow: hidden;
    animation-name: sidebar-in-to-place;
    animation-direction: reverse;
    animation-fill-mode: both;
  }

  &__inner-menu,
  &__opening-inner-menu,
  &__open-inner-menu,
  &__opening-inner-menu-after-closing-other,
  &__closing-inner-menu,
  &__closed-inner-menu {
    overflow: hidden;
  }

  @media (prefers-reduced-motion) {
    transition-duration: 0s;

    &__slider,
    &__inner-menu-wrapper-in-to-place,
    &__inner-menu-wrapper-in-to-place-after-closing-other,
    &__inner-menu-wrapper-out-of-place {
      animation-duration: 1ms;
      animation-delay: 0s;
    }
  }
}