@use '@mezzanine-ui/system/effect' as effect;
@use '@mezzanine-ui/system/palette' as palette;
@use '@mezzanine-ui/system/radius' as radius;
@use '@mezzanine-ui/system/spacing' as spacing;
@use '@mezzanine-ui/system/transition' as transition;
@use '@mezzanine-ui/system/typography';
@use '../button/utils' as btn-utils;
@use '../icon';
@use './navigation' as *;
@use './utils';

// option icon and text height
$option-icon-size: spacing.semantic-variable(size, element, base) !default;
$option-height: calc(spacing.semantic-variable(padding, vertical, tight) * 2 + #{$option-icon-size}) !default;

.#{$prefix} {
  overflow: hidden;
  background-color: palette.semantic-variable('background', base);
  border-right: 1px solid palette.semantic-variable(separator, neutral-faint);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  transition: transition.standard(width);

  &__content {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: spacing.semantic-variable(gap, tight-fixed);
    margin-right: -1px;
    padding-block: spacing.semantic-variable(padding, vertical, base);

    .#{$prefix}__list {
      @include utils.reset();

      display: grid;
      gap: spacing.semantic-variable(gap, tight);
      padding-inline: spacing.semantic-variable(padding, horizontal, comfort-fixed);
    }
  }

  &__search-input {
    padding-inline: spacing.semantic-variable(padding, horizontal, comfort-fixed);

    .mzn-text-field {
      width: 100%;
    }
  }

  &--expand {
    width: spacing.semantic-variable(size, container, slim);
    min-width: spacing.semantic-variable(size, container, slim);
    height: 100%;
  }

  &--collapsed {
    width: spacing.semantic-variable(size, container, collapsed);
    min-width: spacing.semantic-variable(size, container, collapsed);
    height: 100%;
    max-height: 100%;

    .#{$prefix}__content {
      overflow-y: hidden;
    }

    .#{$prefix}__search-input,
    .#{$option-category-prefix}__title {
      display: none;
    }
  }
}

.#{$overflow-menu-prefix} {
  $sub-menu-item-height: calc(spacing.semantic-variable(padding, vertical, tight) * 2 + spacing.semantic-variable(size, element, base));
  $sub-menu-item-gap: spacing.semantic-variable(gap, tiny);

  background-color: palette.semantic-variable('background', base);
  border-radius: radius.variable(roomy);
  box-shadow: effect.variable(shadow, raised);
  display: flex;
  height: fit-content;
  margin-left: spacing.semantic-variable(padding, horizontal, tight);
  width: fit-content;

  &__content {
    display: flex;
    overflow-y: hidden;
    width: fit-content;
    height: calc(spacing.semantic-variable(padding, vertical, tight) * 2 + #{$sub-menu-item-height} * 5.5 + #{$sub-menu-item-gap} * 5);
  }

  &__sub-menu {
    height: calc(#{$sub-menu-item-height} * 5.5 + #{$sub-menu-item-gap} * 5);
    margin: spacing.semantic-variable(padding, vertical, tight) 0;
    width: spacing.semantic-variable(size, container, tight);

    ul {
      @include utils.reset();

      display: flex;
      flex-direction: column;
      gap: $sub-menu-item-gap;
      padding: 0 spacing.semantic-variable(padding, horizontal, tight);
    }
  }
}


.#{$overflow-menu-option-prefix} {
  align-items: center;
  box-sizing: border-box;
  display: grid;
  flex-shrink: 1;
  gap: spacing.semantic-variable(gap, tight);
  height: unset;
  width: 100%;

  &__content {
    align-items: center;
    border-radius: radius.variable(base);
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    outline: none;
    overflow: hidden;
    width: 100%;
    gap: spacing.semantic-variable(gap, tight);
    padding: spacing.semantic-variable(padding, vertical, tight)
      spacing.semantic-variable(padding, horizontal, tight-fixed);
    transition: transition.standard(background-color, fast), transition.standard(color, fast);
    text-decoration: none;

    .#{$overflow-menu-option-prefix}__title {
      @include typography.semantic-variable(label-secondary, (line-height));

      color: palette.semantic-variable(text, neutral-solid);
      line-height: spacing.semantic-variable(size, element, base);
      margin-right: auto;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .#{$overflow-menu-option-prefix}__icon {
      color: palette.semantic-variable(icon, neutral);
      height: #{$option-icon-size};
      width: #{$option-icon-size};
    }

    .#{$overflow-menu-option-prefix}__toggle-icon {
      color: palette.semantic-variable(icon, neutral);
      height: spacing.semantic-variable(size, element, slim);
      width: spacing.semantic-variable(size, element, slim);
    }

    &:hover {
      .#{$overflow-menu-option-prefix}__icon,
      .#{$overflow-menu-option-prefix}__toggle-icon {
        color: palette.semantic-variable(icon, neutral-solid);
      }

      background-color: palette.semantic-variable('background', neutral-faint);
    }

    &:focus-visible {
      box-shadow: effect.variable(focus, primary);
    }
  }

  &--active {
    .#{$overflow-menu-option-prefix}__content {
      background-color: palette.semantic-variable('background', brand-ghost);

      .#{$overflow-menu-option-prefix}__icon {
        color: palette.semantic-variable(icon, neutral-solid);
      }
    }
  }

  &--active.#{$overflow-menu-option-prefix}--basic {
    .#{$overflow-menu-option-prefix}__content {
      background-color: palette.semantic-variable('background', brand-faint);

      .#{$overflow-menu-option-prefix}__title {
        color: palette.semantic-variable(text, brand-solid);
      }

      .#{$overflow-menu-option-prefix}__icon {
        color: palette.semantic-variable(icon, brand-solid);
      }
    }
  }
}

.#{$header-prefix} {
  align-items: center;
  border-bottom: 1px solid palette.semantic-variable(separator, neutral-faint);
  box-sizing: border-box;
  display: flex;
  gap: spacing.semantic-variable(gap, comfort);
  justify-content: space-between;
  padding: spacing.semantic-variable(padding, vertical, comfort)
    spacing.semantic-variable(padding, horizontal, comfort-fixed)
    spacing.semantic-variable(padding, vertical, base);
  position: relative;
  width: calc(100% + 1px);
  flex-direction: row-reverse;

  &__content {
    @include btn-utils.reset();

    align-items: center;
    color: palette.semantic-variable(text, neutral-solid);
    display: flex;
    flex-grow: 1;
    gap: spacing.semantic-variable(gap, base);
    border-radius: radius.variable(base);
  }

  &__children-wrapper {
    display: flex;
    flex: 0 0 auto;
    width: spacing.semantic-variable(size, element, airy);
    height: spacing.semantic-variable(size, element, airy);
    transition: transition.standard(opacity, fast);
  }

  &__title {
    @include typography.semantic-variable(h3);

    transition: transition.standard(width, fast), transition.standard(opacity, fast), transition.standard(background-color, fast);
  }

  &--collapsed.#{$header-prefix}--has-children {
    .#{$header-prefix}__title {
      width: 0;
    }
  }

  &--collapsed {
    .#{$header-prefix}__content {
      top: spacing.semantic-variable(padding, vertical, comfort);
      left: spacing.semantic-variable(padding, horizontal, comfort-fixed);
      overflow-x: hidden;
      pointer-events: none;
      position: absolute;
      width: spacing.semantic-variable(size, element, airy);
      height: spacing.semantic-variable(size, element, airy);
    }

    .#{$header-prefix}__title {
      display: flex;
      place-items: center;
      width: 100%;
      aspect-ratio: 1 / 1;
      justify-content: center;
      background-color: palette.semantic-variable('background', brand);
      color: palette.semantic-variable(text, fixed-light);
    }

    .#{$icon-button-prefix} {
      opacity: 0;
    }

    &:hover {
      .#{$header-prefix}__content {
        opacity: 0;
      }

      .#{$header-prefix}__children-wrapper {
        opacity: 0;
      }

      .#{$icon-button-prefix} {
        opacity: 1;
      }
    }
  }
}

.#{$footer-prefix} {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: spacing.semantic-variable(padding, vertical, base)
    spacing.semantic-variable(padding, horizontal, comfort-fixed)
    spacing.semantic-variable(padding, vertical, comfort);
  gap: spacing.semantic-variable(gap, tight-fixed);

  &__icons {
    display: flex;
    align-items: center;
    gap: spacing.semantic-variable(gap, tiny);
  }

  &--collapsed {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;

    .#{$footer-prefix}__icons {
      display: flex;
      flex-direction: column;
    }

    .#{$user-menu-prefix} {
      padding: 0;
      width: 100%;

      &__content {
        & > :not(:first-child) {
          display: none;
        }
      }
    }
  }
}

.#{$option-prefix} {
  align-items: center;
  box-sizing: border-box;
  display: grid;
  flex-shrink: 1;
  gap: spacing.semantic-variable(gap, tight);
  height: unset;
  width: 100%;

  &--hidden {
    display: none;
  }

  &__content {
    align-items: center;
    border-radius: radius.variable(base);
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    outline: none;
    overflow: hidden;
    width: 100%;
    gap: spacing.semantic-variable(gap, tight);
    padding: spacing.semantic-variable(padding, vertical, tight)
      spacing.semantic-variable(padding, horizontal, tight-fixed);
    transition: transition.standard(background-color, fast), transition.standard(color, fast);
    text-decoration: none;

    .#{$option-prefix}__title-wrapper {
      flex-shrink: 1;
      margin-right: auto;
      min-width: 0;
      overflow: hidden;
      transition: transition.standard(opacity, fast);

      &:empty {
        display: none;
      }
    }

    .#{$option-prefix}__title {
      @include typography.semantic-variable(label-primary-highlight, (line-height));

      color: palette.semantic-variable(text, neutral-solid);
      display: block;
      line-height: #{$option-icon-size};
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .#{$option-prefix}__icon {
      color: palette.semantic-variable(icon, neutral);
      height: #{$option-icon-size};
      width: #{$option-icon-size};
    }

    .#{$option-prefix}__toggle-icon {
      color: palette.semantic-variable(icon, neutral);
      height: spacing.semantic-variable(size, element, slim);
      width: spacing.semantic-variable(size, element, slim);
    }

    &:hover {
      .#{$option-prefix}__icon,
      .#{$option-prefix}__toggle-icon {
        color: palette.semantic-variable(icon, neutral-solid);
      }

      background-color: palette.semantic-variable('background', neutral-faint);
    }

    &:focus-visible {
      box-shadow: effect.variable(focus, primary);
    }
  }

  &--active:not(.#{$option-prefix}--open):not(.#{$option-prefix}--basic) {
    & > .#{$option-prefix}__content {
      background-color: palette.semantic-variable('background', brand-ghost);

      .#{$option-prefix}__title {
        color: palette.semantic-variable(text, neutral-solid);
      }

      .#{$option-prefix}__icon {
        color: palette.semantic-variable(icon, neutral-solid);
      }
    }
  }

  &--active.#{$option-prefix}--open {
    & > .#{$option-prefix}__content {
      .#{$option-prefix}__title {
        color: palette.semantic-variable(text, brand);
      }

      .#{$option-prefix}__icon {
        color: palette.semantic-variable(icon, brand);
      }

      .#{$option-prefix}__toggle-icon {
        color: palette.semantic-variable(icon, neutral-solid);
      }
    }
  }

  &--active.#{$option-prefix}--basic {
    & > .#{$option-prefix}__content {
      background-color: palette.semantic-variable('background', brand-faint);

      .#{$option-prefix}__title {
        color: palette.semantic-variable(text, brand-solid);
      }

      .#{$option-prefix}__icon {
        color: palette.semantic-variable(icon, brand-solid);
      }
    }
  }

  &__group {
    @include utils.reset();

    display: grid;
    gap: spacing.semantic-variable(gap, tight);
  }


  &--level-1 {
    margin-left: 0;
  }

  &--level-2 {
    margin-left: spacing.semantic-variable(padding, horizontal, relaxed);
    width: calc(
      100% - spacing.semantic-variable(padding, horizontal, relaxed)
    );

    .#{$option-prefix}__title {
      @include typography.semantic-variable(label-secondary, (line-height));
    }
  }

  &--level-3 {
    margin-left: spacing.semantic-variable(padding, horizontal, breath);
    width: calc(100% - spacing.semantic-variable(padding, horizontal, breath));

    .#{$option-prefix}__title {
      @include typography.semantic-variable(label-secondary, (line-height));
    }
  }

  &--collapsed {
    .#{$option-prefix}__children-wrapper {
      display: none;
    }

    .#{$option-prefix}__content {
      margin: 0 auto;
      max-width: 100%;

      .#{$option-prefix}__toggle-icon,
      .mzn-badge {
        display: none;
      }

      &:not(:has(.#{$option-prefix}__icon)) {
        justify-content: center;
        padding-inline: 0;

        .#{$option-prefix}__title-wrapper {
          margin-right: 0;
        }
      }
    }

    &.#{$option-prefix}--active.#{$option-prefix}--open {
      & > .#{$option-prefix}__content {
        background-color: palette.semantic-variable('background', brand-faint);

        .#{$option-prefix}__icon {
          color: palette.semantic-variable(icon, neutral-solid);
        }
      }
    }

    .#{$option-prefix}__title {
      @include typography.semantic-variable(label-secondary, (line-height));

      text-overflow: clip;
    }
  }
}

.#{$icon-button-prefix} {
  @include btn-utils.reset();

  align-items: center;
  justify-content: center;
  border-radius: radius.variable(base);
  box-sizing: border-box;
  color: palette.semantic-variable(icon, neutral-strong);
  display: flex;
  padding: spacing.semantic-variable(padding, vertical, tight-fixed)
    spacing.semantic-variable(padding, horizontal, tight-fixed);
  transition: transition.standard(background-color, fast), transition.standard(opacity, fast);
  width: spacing.semantic-variable(size, element, airy);
  height: spacing.semantic-variable(size, element, airy);

  &:hover,
  &:active {
    background-color: palette.semantic-variable('background', neutral-faint);
    color: palette.semantic-variable(icon, neutral-strong);
  }

  &:focus-visible {
    box-shadow: effect.variable(focus, primary);
  }

  &--active {
    background-color: palette.semantic-variable('background', brand-faint);
    color: palette.semantic-variable(icon, brand-solid);

    &:hover,
    &:active {
      background-color: palette.semantic-variable('background', brand-faint);
      color: palette.semantic-variable(icon, brand-solid);
    }
  }
}

.#{$user-menu-prefix} {
  @include btn-utils.reset();

  border-radius: radius.variable(base);
  max-width: calc(spacing.semantic-variable(size, container, slim) - var(--icons-width) - spacing.semantic-variable(padding, horizontal, comfort-fixed) * 2 - spacing.semantic-variable(gap, tight-fixed));
  padding: spacing.semantic-variable(padding, vertical, micro)
    spacing.semantic-variable(padding, horizontal, tiny);

  &__content {
    align-items: center;
    border-radius: radius.variable(base);
    box-sizing: border-box;
    display: flex;
    gap: spacing.semantic-variable(gap, tight-fixed);
    position: relative;
  }

  &__avatar {
    align-items: center;
    background-color: palette.semantic-variable('background', neutral);
    border-radius: radius.variable(full);
    border: 1px solid palette.semantic-variable('background', neutral-subtle);
    box-sizing: border-box;
    color: palette.semantic-variable(icon, fixed-light);
    display: flex;
    flex-shrink: 0;
    height: spacing.semantic-variable(size, element, airy);
    justify-content: center;
    width: spacing.semantic-variable(size, element, airy);
  }

  &__user-name {
    @include typography.semantic-variable(caption);

    align-items: center;
    color: palette.semantic-variable(text, neutral-solid);
    display: flex;
    flex-shrink: 1;
    overflow-x: hidden;

    & > span {
      overflow-x: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  &__icon {
    color: palette.semantic-variable(icon, neutral-bold);
    transition: transition.standard(transform, fast);
  }

  &--open {
    background-color: palette.semantic-variable('background', neutral-subtle);

    .#{$user-menu-prefix}__icon {
      transform: rotate(180deg);
    }
  }

  &:hover,
  &:active {
    background-color: palette.semantic-variable('background', neutral-subtle);
  }

  &:focus-visible {
    box-shadow: effect.variable(focus, primary);
  }
}

.#{$option-category-prefix} {
  box-sizing: border-box;
  display: grid;
  gap: spacing.semantic-variable(gap, tight);

  &__title {
    @include typography.semantic-variable(annotation);

    color: palette.semantic-variable(text, neutral-light);
    padding: spacing.semantic-variable(padding, vertical, micro)
      spacing.semantic-variable(padding, horizontal, tight-fixed);
  }

  > ul {
    @include utils.reset();

    display: grid;
    gap: spacing.semantic-variable(gap, tight);
  }
}