@use "../../breakpoint" as *;
@use "../../config" as *;
@use "../../motion" as *;
@use "../../theme" as *;
@use "../../spacing" as *;
@use "../../type" as *;
@use "../../utilities/button-reset";
@use "../../utilities/component-reset";
@use "../../utilities/convert";

@mixin banner-navigation {
  .#{$prefix}--banner-navigation {
    background: $action-solid-fill-primary-default; //TODO use a new background token for interactive-02
    @include reset;
    display: flex;
    // @include font-smoothing; //added to reset mixin
    @include breakpoint-down("md") {
      display: none;
    }
    .#{$prefix}--search {
      .#{$prefix}--search-input {
        border: none;
        padding-left: 1.35em;
        border: none;
        border-radius: 2px !important;
      }
      .#{$prefix}--search-magnifier-icon {
        left: 0.4em;
        height: 0.9em;
        width: 0.9em;
      }
      .#{$prefix}--search-close {
        right: 0.3em;
      }
    }
  }

  .#{$prefix}--banner-navigation__item {
    @include type-style("label");
    @include font-family("sans");
    padding: 0 $spacing-03;

    font-size: 0.85rem; //TODO: use token
    @include breakpoint("xlg") {
      padding: 0 $spacing-04;
    }

    &:last-child {
      padding-right: 0;
    }

    a {
      @include type-style("label");
      color: $text-inverse-default;
      text-decoration: none;
      font-weight: 500;

      &:hover {
        color: $action-default-text-primary-hover;
        text-decoration: underline;
      }

      &:focus {
        color: $background-main;
      }

      &:visited,
      &:active {
        color: $action-default-text-primary-active;
      }
    }
  }

  .#{$prefix}--banner-navigation__list {
    display: flex;
    justify-content: flex-end;
    height: 2rem;
    align-items: center;
  }
}