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

[data-fs-search-dropdown] {
  // --------------------------------------------------------
  // Design Tokens for Search Dropdown
  // --------------------------------------------------------

  // Default properties
  --fs-search-input-height-desktop          : var(--fs-spacing-6);
  --fs-search-dropdown-bkg-color            : var(--fs-color-neutral-0);
  --fs-search-dropdown-box-shadow           : var(--fs-shadow);

  --fs-search-dropdown-width-mobile         : 100vw;
  --fs-search-dropdown-width-desktop        : 100%;

  --fs-search-dropdown-border-width         : var(--fs-border-width);
  --fs-search-dropdown-border-color         : var(--fs-border-color);
  --fs-search-dropdown-border-radius        : 0 0 var(--fs-border-radius) var(--fs-border-radius);

  --fs-search-dropdown-position-left-mobile : calc(-1 * var(--fs-control-tap-size));
  --fs-search-dropdown-position-left-tablet : calc(var(--fs-search-dropdown-position-left-mobile) - var(--fs-spacing-1));
  --fs-search-dropdown-position-top-mobile  : calc(var(--fs-search-dropdown-position-top-tablet) + 1px);
  --fs-search-dropdown-position-top-tablet  : calc(var(--fs-control-tap-size) + var(--fs-border-width));
  --fs-search-dropdown-position-top-desktop : var(--fs-search-input-height-desktop);

  --fs-search-dropdown-section-border-color : var(--fs-border-color-light);

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

  position: absolute;
  top: var(--fs-search-dropdown-position-top-mobile);
  left: var(--fs-search-dropdown-position-left-mobile);
  z-index: 1;
  width: var(--fs-search-dropdown-width-mobile);
  padding-top: 0;
  background-color: var(--fs-search-dropdown-bkg-color);
  &:empty { display: none; }

  @include utilities.media(">=tablet") {
    top: var(--fs-search-dropdown-position-top-tablet);
    left: var(--fs-search-dropdown-position-left-tablet);
  }

  @include utilities.media(">=notebook") {
    top: var(--fs-search-dropdown-position-top-desktop);
    left: 0;
    width: var(--fs-search-dropdown-width-desktop);
    overflow: hidden;
    border: var(--fs-search-dropdown-border-width) solid var(--fs-search-dropdown-border-color);
    border-top: none;
    border-radius: var(--fs-search-dropdown-border-radius);
    box-shadow: var(--fs-search-dropdown-box-shadow);
  }

  [data-fs-search-dropdown-loading-text] { padding: var(--fs-spacing-3); }

  section, [data-fs-search-section] {
    border-bottom: var(--fs-search-dropdown-border-width) solid var(--fs-search-dropdown-section-border-color);

    &:last-child {
      border-bottom-width: 0;
    }
  }
}