@use "../../../styles/base/utilities";

[data-fs-navbar] {
  // --------------------------------------------------------
  // Design Tokens for Navbar
  // --------------------------------------------------------

  // Default properties

  --fs-navbar-height-mobile: 3.5rem;

  --fs-navbar-bkg-color: rgb(255 255 255 / 90%);

  --fs-navbar-transition-timing: var(--fs-transition-timing);
  --fs-navbar-transition-function: var(--fs-transition-function);

  --fs-navbar-box-shadow: 0 var(--fs-spacing-0) var(--fs-spacing-3) rgb(0 0 0 / 5%);

  // Header
  --fs-navbar-header-padding: 0 var(--fs-spacing-0);

  --fs-navbar-header-padding-top-notebook: var(--fs-spacing-1);
  --fs-navbar-header-padding-bottom-notebook: var(--fs-navbar-header-padding-top-notebook);

  // Search
  --fs-navbar-search-button-icon-width-mobile: var(--fs-spacing-5);
  --fs-navbar-search-button-icon-height-mobile: var(--fs-navbar-search-button-icon-width-mobile);

  // Search Expanded
  --fs-navbar-search-expanded-input-width: calc(100% - var(--fs-spacing-7));

  --fs-navbar-search-expanded-button-icon-margin-right: -4.063rem;

  // Logo
  --fs-navbar-logo-width: var(--fs-logo-width);
  --fs-navbar-logo-border-left-width: var(--fs-border-width);
  --fs-navbar-logo-border-left-color: var(--fs-border-color-light);

  // --------------------------------------------------------
  // Structural Styles
  // --------------------------------------------------------

  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  box-shadow: var(--fs-navbar-box-shadow);
  transition: top var(--fs-navbar-transition-timing) var(--fs-navbar-transition-function);

  @include utilities.media("<notebook") {
    height: var(--fs-navbar-height-mobile);
  }

  &[data-fs-navbar-scroll="down"] {
    >[data-fs-navbar-links] {
      top: calc(-1 * var(--fs-spacing-3));
      height: 0;
      padding: 0;
      opacity: 0;
    }
  }

  &[data-fs-navbar-scroll="up"] {
    >[data-fs-navbar-links] {
      top: 0;
      opacity: 1;
    }
  }

  [data-fs-search-input] {
    flex: 1 0 100%;
    order: 2;

    @include utilities.media("<notebook") {
      display: none;
    }
  }

  [data-fs-navbar-row] {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;

    @include utilities.media("<notebook") {
      padding: 0;
    }

    @include utilities.media(">=notebook") {
      display: grid;
      grid-template-columns: 1fr minmax(auto, 32.5rem) 1fr;
    }

    [data-fs-navbar-button-menu] {
      @include utilities.media(">=notebook") {
        display: none;
      }

      margin: 0 var(--fs-spacing-1);
    }
  }

  [data-fs-navbar-buttons] {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    [data-fs-button-signin-link] + [data-fs-cart-toggle] {
      @include utilities.media(">=notebook") {
        margin-inline-start: var(--fs-spacing-3);
      }
    }

    [data-fs-button-signin-link] {
      display: none;
    }

    [data-fs-localization-button] {
      [data-fs-button-wrapper] [data-fs-button-icon] + span {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: var(--fs-spacing-1);
        align-items: center;
      }
    }

    @include utilities.media(">=notebook") {
      order: 2;

      [data-fs-button] {
        // TODO: remove this after adding `regular` size to the button
        --fs-button-height: 40px;
      }

      [data-fs-button-signin-link] {
        display: inline-flex;
      }
    }

    [data-fs-search-input] {
      display: none;
      transition: flex var(--fs-navbar-transition-timing) var(--fs-navbar-transition-function);

      @include utilities.media("<notebook") {
        display: flex;
        flex: 0;
        flex-direction: column;
        order: 0;
        width: min-content;

        &[data-fs-search-input-dropdown-visible="false"] [data-fs-search-input-field-input] {
          width: 0;
          padding: 0;
          border-width: 0;

          &:hover,
          &:focus,
          &:focus-visible &:hover:focus-visible {
            border-width: 0;
            box-shadow: 0 0;
          }
        }

        [data-fs-icon] {
          margin-inline-end: 0;
          line-height: 0;

          svg {
            width: var(--fs-navbar-search-button-icon-width-mobile);
            height: var(--fs-navbar-search-button-icon-height-mobile);
          }
        }
      }
    }

    &[data-fs-navbar-search-expanded="true"] {
      width: 100%;

      [data-fs-search-input] {
        flex: 1 1;

        [data-fs-search-input-field] [data-fs-search-input-field-input] {
          width: var(--fs-navbar-search-expanded-input-width);
          padding: var(--fs-spacing-2);
        }

        [data-fs-icon] {
          margin-inline-end: 0;
        }
      }

      [data-fs-icon-button="true"] {
        inset-inline-end: 0;
        transition: margin var(--fs-navbar-transition-timing) var(--fs-navbar-transition-function);
      }

      [data-fs-cart-toggle] {
        inset-inline-end: 0;
        display: none;
      }
    }
  }

  [data-fs-navbar-header] {
    z-index: var(--fs-z-index-top);
    height: 100%;
    background-color: var(--fs-navbar-bkg-color);
    backdrop-filter: blur(10px);
  }

  [data-fs-navbar-logo] {
    align-self: stretch;
    height: 100%;

    @include utilities.media("<notebook") {
      padding: var(--fs-spacing-1) 0 var(--fs-spacing-1) var(--fs-spacing-3);
      margin-inline: auto 0;
      border-inline-start: var(--fs-navbar-logo-border-left-width) solid var(--fs-navbar-logo-border-left-color);
    }

    [data-fs-logo] {
      width: var(--fs-navbar-logo-width);

      @include utilities.media(">=notebook") {
        padding: var(--fs-spacing-2) 0;
      }
    }
  }
}