@use "../../settings/constants";

.mykn-sidebar {
  --mykn-sidebar-width: none;
  --mykn-sidebar-border: none;

  $self: &;
  display: flex;
  flex-direction: column;
  height: 100cqh; // Height of container (probably Page component)
  position: static;
  top: 0;
  transition: all var(--animation-duration-medium)
    var(--animation-timing-function);
  width: var(--mykn-sidebar-width);
  z-index: 1000;

  &--min-width {
    --mykn-sidebar-width: min(
      280px,
      calc(100vw - 40px - 48px)
    ); // Screen width - toolbar width - 2 * toggle width.
  }

  &--border {
    --mykn-sidebar-border: 1px solid var(--typography-color-border);
  }

  &--sticky {
    position: sticky;
  }

  &:has(> &__header &__toggle) {
    z-index: 1010;
  }

  &--position-start &__header &__toggle,
  &--position-end &__header &__toggle {
    inset-block-start: calc(
      var(--typography-line-height-h2) + var(--typography-font-size-h2)
    );
    position: absolute;
    transform-origin: center;
  }

  &--position-start &__header &__toggle {
    inset-inline-start: 100%;
    transform: translate(
      -50%,
      calc(-50% + var(--mykn-button-offset))
    ); // TODO: RTL support.
  }

  &--position-end &__header &__toggle {
    inset-inline-end: 100%;
    transform: translate(
      50%,
      calc(-50% + var(--mykn-button-offset))
    ); // TODO: RTL support.
  }

  .mykn-page > &--position-end {
    align-self: flex-end;
  }

  &__header,
  &__body {
    border-inline-end: var(--mykn-sidebar-border);
    width: var(--mykn-sidebar-width);
    transition: all var(--animation-duration-medium)
      var(--animation-timing-function);
  }

  &__header {
    flex-shrink: 0;
    overflow-y: visible;
    z-index: 10;
  }

  &__header .mykn-body {
    display: flex;
    height: calc(var(--typography-line-height-h2));
    justify-content: center;
  }

  &__body {
    height: 100%;
    overflow: hidden;
    position: relative;
  }

  &__body .mykn-card,
  &__header .mykn-card {
    height: 100%;
    position: sticky;
    inset-block-start: 0;
    inset-inline-start: 0;
  }

  &__header .mykn-card {
    overflow: visible;
  }

  &__body .mykn-card {
    width: var(--mykn-sidebar-width);
  }

  /// Collapsed state
  &:not([aria-expanded="true"]):not(
      :has(:not(.mykn-sidebar__toggle):focus)
    ):not(:has(&__body:hover)) {
    width: calc(
      var(--typography-line-height-body-xs) + 2 * var(--sizes-spacing-xs-h)
    );

    #{$self}__header,
    #{$self}__body {
      width: calc(
        var(--typography-line-height-body-xs) + 2 * var(--sizes-spacing-xs-h)
      );
    }

    #{$self}__header .mykn-body {
      padding-inline: calc(0.5 * var(--sizes-spacing-xs-h));
    }

    .mykn-logo .mykn-logo__handle {
      transition: none;
    }
  }

  &:not([aria-expanded="true"]):has(:not(.mykn-sidebar__toggle):focus),
  &:not([aria-expanded="true"]):has(&__body:hover) {
    width: calc(
      var(--typography-line-height-body-xs) + 2 * var(--sizes-spacing-xs-h)
    );
  }

  &:not([aria-expanded="true"]):has(&__body:hover) {
    transition-delay: 1s;

    #{$self}__header,
    #{$self}__header .mykn-body,
    #{$self}__body {
      transition-delay: 1s;
    }
  }

  @media screen and (max-width: constants.$breakpoint-desktop - 1px) {
    width: calc(
      var(--typography-line-height-body-xs) + 2 * var(--sizes-spacing-xs-h) +
        2.1px
    );
  }
}