$fade-fill: var(--wds-internal-sidebar-footer-fade-fill);

@property --wds-internal-sidebar-footer-fade-fill {
  syntax: '<color>';
  inherits: true;
  initial-value: transparent;
}

.sidebar-next {
  position: relative;
  height: 100%;
  transition: width 0.3s ease-in-out, margin-left 0.6s, margin-right 0.6s,
    visibility 0.6s;

  &--hidden {
    margin-inline-start: 0;
    visibility: hidden;
  }

  & &__section {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    z-index: 2;
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
    transition: width 0.3s ease-in-out;

    &--skin-dark {
      background-color: var(
        --wds-sidebar-fill-dark,
        var(--wds-sidebar-item-level-1-fill-dark-default, #131720)
      );
    }

    &--skin-light {
      background-color: var(
        --wds-sidebar-fill-light,
        var(
          --wds-sidebar-item-level-1-fill-light-default,
          var(--wds-color-white, var(--wsr-color-D80, #ffffff))
        )
      );
      /* Harmony renders it as two 1px columns: an inner white hairline (the
         inset shadow) next to the outer line (this border), via the border
         tokens. Other themes keep the single divider border unchanged. */
      border-right: 1px solid
        var(
          --wds-sidebar-border-outer-fill,
          var(
            --wds-sidebar-divider-fill-light-default,
            var(--wds-color-black-550, var(--wsr-color-D60, #dfe5eb))
          )
        );
      box-shadow: inset -1px 0 0 0 var(--wds-sidebar-border-inner-fill, transparent);
    }

    &--skin-neutral {
      background-color: var(
        --wds-sidebar-fill-neutral,
        var(
          --wds-sidebar-item-level-1-fill-neutral-default,
          var(--wds-color-black-700, #eceff3)
        )
      );
    }
  }

  & &__content {
    height: 100%;
    position: relative;
  }

  & &__header,
  & &__footer {
    box-sizing: border-box;
    padding-inline-start: var(--wds-sidebar-padding-start, var(--wds-space-0, 0));
    padding-inline-end: var(--wds-sidebar-padding-end, var(--wds-space-0, 0));
  }

  & &__header {
    padding-top: var(--wds-sidebar-padding-top, var(--wds-space-0, 0));
  }

  & &__footer {
    position: relative;
    padding-bottom: var(--wds-sidebar-padding-bottom, var(--wds-space-0, 0));

    &::before {
      content: '';
      position: absolute;
      inset-inline-start: 0;
      /* keep the fade clear of the 8px scrollbar column */
      inset-inline-end: 8px;
      bottom: 100%;
      height: var(--wds-sidebar-footer-fade-height, var(--wds-space-0, 0));
      pointer-events: none;
      /* stylelint-disable-next-line plugin/use-baseline */
      background: linear-gradient(
        178deg,
        transparent 16%,
        color-mix(in srgb, #{$fade-fill} 80%, transparent) 39%,
        #{$fade-fill} 67.29%
      );
    }

    /* Collapse the footer entirely (it always renders), so neither its padding
       nor the fade reserves any space. */
    &:empty {
      display: none;
    }
  }

  /* ...and drop the scroll area's fade clearance when there is no footer. */
  /* stylelint-disable-next-line plugin/use-baseline */
  & &__section:has(&__footer:empty) &__scroll-area {
    padding-bottom: 0;
  }

  & &__section--skin-dark &__footer {
    --wds-internal-sidebar-footer-fade-fill: var(
      --wds-sidebar-fill-dark,
      var(--wds-sidebar-item-level-1-fill-dark-default, #131720)
    );
  }

  & &__section--skin-light &__footer {
    --wds-internal-sidebar-footer-fade-fill: var(
      --wds-sidebar-fill-light,
      var(
        --wds-sidebar-item-level-1-fill-light-default,
        var(--wds-color-white, #f7f7f7)
      )
    );
  }

  & &__section--skin-neutral &__footer {
    --wds-internal-sidebar-footer-fade-fill: var(
      --wds-sidebar-fill-neutral,
      var(
        --wds-sidebar-item-level-1-fill-neutral-default,
        var(--wds-color-black-700, #f7f7f7)
      )
    );
  }

  & &__section--minimized &__header,
  & &__section--minimized &__footer,
  & &__section--minimized &__scroll-area {
    padding-inline-start: var(--wds-sidebar-minimized-padding-inline, var(--wds-space-0, 0));
    padding-inline-end: var(--wds-sidebar-minimized-padding-inline, var(--wds-space-0, 0));
  }

  & &__scroll-area {
    position: absolute;
    overflow: auto;
    overflow-y: overlay !important;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-top: var(--wds-sidebar-header-margin-bottom, var(--wds-space-200, 12px));
    padding-bottom: var(--wds-sidebar-footer-fade-height, var(--wds-space-0, 0));
    padding-inline-start: var(--wds-sidebar-padding-start, var(--wds-space-0, 0));
    padding-inline-end: var(--wds-sidebar-padding-end, var(--wds-space-0, 0));
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;

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

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

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

    &--skin-dark::-webkit-scrollbar-thumb {
      background-color: var(--wds-sidebar-scrollbar-fill-dark-default, #717479);
    }

    @media (hover: hover) {
      &--skin-dark::-webkit-scrollbar-thumb:hover {
        background: var(--wds-sidebar-scrollbar-fill-dark-hover, #b8b9bc);
      }
    }

    &--skin-light::-webkit-scrollbar-thumb {
      background-color: var(--wds-sidebar-scrollbar-fill-light-default, #a8caff);
    }

    @media (hover: hover) {
      &--skin-light::-webkit-scrollbar-thumb:hover {
        /* stylelint-disable-next-line plugin/use-baseline */
        background: var(
          --wds-sidebar-scrollbar-fill-light-hover,
          color-mix(
            in srgb,
            var(--wds-color-black-100, var(--wsr-color-D10, #000624)) 66%,
            transparent
          )
        );
      }
    }

    &--skin-neutral::-webkit-scrollbar-thumb {
      background-color: var(
        --wds-sidebar-scrollbar-fill-neutral-default,
        #a8caff
      );
    }

    @media (hover: hover) {
      &--skin-neutral::-webkit-scrollbar-thumb:hover {
        background-color: var(
          --wds-sidebar-scrollbar-fill-neutral-hover,
          var(--wds-sidebar-scrollbar-fill-neutral-default, #a8caff)
        );
      }
    }
  }

  /* stylelint-disable-next-line plugin/use-baseline */
  @container style(--wds-internal-theme: odeditor) {
    & &__header {
      padding-bottom: var(--wds-sidebar-header-margin-bottom, var(--wds-space-200, 0));
    }

    & &__scroll-area {
      padding-top: 0;
    }
  }

  & &__list-items {
    overflow: hidden;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
}