/* stylelint-disable declaration-property-value-keyword-no-deprecated */
@use 'sass:math';
@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';
@use './breadcrumb' as *;

.#{$prefix} {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: spacing.semantic-variable(gap, tiny);
  position: relative;

  &__icon-button {
    @include button.reset();

    border-radius: radius.variable(tiny);
    line-height: 0;
    position: relative;
    transition: transition.standard(background-color, fast), transition.standard(box-shadow, fast);

    & > :first-child {
      color: palette.semantic-variable(icon, neutral);
      transition: transition.standard(color, fast);
    }

    &:focus-visible {
      background-color: palette.semantic-variable('background', base);
      box-shadow: effect.variable(focus, primary);
    }

    &:hover > :first-child {
      color: palette.semantic-variable(icon, brand);
    }
  }

  &__menu {
    z-index: 1;
    background-color: palette.semantic-variable('background', base);
    border-radius: radius.variable(roomy);
    box-shadow: effect.variable(shadow, raised);
    display: flex;
    height: fit-content;
    margin-top: spacing.semantic-variable(padding, vertical, tight);
    padding: spacing.semantic-variable(padding, vertical, tight) spacing.semantic-variable(padding, horizontal, tight);
    position: relative;
    width: spacing.semantic-variable(size, container, tight);

    &__content {
      background-color: palette.semantic-variable('background', base);
      width: 100%;
      display: grid;
    }
  }
}

.#{$prefix}__item {
  position: relative;

  &__trigger {
    @include button.reset();

    align-items: center;
    border-radius: radius.variable(tiny);
    color: palette.semantic-variable(text, neutral);
    display: flex;
    gap: spacing.semantic-variable(gap, tiny);
    transition: transition.standard(color, fast), transition.standard(background-color, fast), transition.standard(box-shadow, fast);
    white-space: nowrap;

    &:focus-visible {
      background-color: palette.semantic-variable('background', base);
      box-shadow: effect.variable(focus, primary);
    }

    &:hover {
      color: palette.semantic-variable(text, brand);

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

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

  &--current {
    .#{$prefix}__item__trigger {
      color: palette.semantic-variable(text, neutral-solid);

      &:hover {
        color: palette.semantic-variable(text, neutral-solid);

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

  &--expanded {
    .#{$prefix}__item__trigger {
      color: palette.semantic-variable(text, neutral-solid);

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

      &:hover {
        color: palette.semantic-variable(text, neutral-solid);

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

.#{$prefix}__overflow-menu-item {
  display: grid;

  > :first-child {
    display: grid;
  }

  &__trigger {
    @include button.reset();

    align-items: center;
    color: palette.semantic-variable(text, neutral-solid);
    display: flex;
    gap: spacing.semantic-variable(gap, tiny);
    justify-content: space-between;
    transition: transition.standard(color, fast), transition.standard(background-color, fast), transition.standard(box-shadow, fast);
    white-space: nowrap;
    padding: spacing.semantic-variable(padding, vertical, base) spacing.semantic-variable(padding, horizontal, base);
    background-color: palette.semantic-variable('background', base);
    border-radius: radius.variable(base);

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

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

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

  &--expanded {
    .#{$prefix}__overflow-menu-item__trigger {
      background-color: palette.semantic-variable('background', neutral-subtle);
    }
  }
}