/*******************************
            Search
*******************************/

/* Search Prompt */
@searchPromptBackground: @inputBackground;
@searchPromptVerticalPadding: @inputVerticalPadding;
@searchPromptHorizontalPadding: @inputHorizontalPadding;
@searchPromptLineHeight: @inputLineHeight;
@searchPromptFontSize: @relativeMedium;
@searchPromptPadding: (@searchPromptVerticalPadding + ((1em - @searchPromptLineHeight) / 2)) @searchPromptHorizontalPadding;
@searchPromptBorder: 1px solid @borderColor;
@searchPromptBorderRadius: @circularRadius;
@searchPromptColor: @textColor;
@promptTransition:
  background-color @defaultDuration @defaultEasing,
  color @defaultDuration @defaultEasing,
  box-shadow @defaultDuration @defaultEasing,
  border-color @defaultDuration @defaultEasing
;
@searchPromptBoxShadow: 0em 0em 0em 0em transparent inset;

/* Mobile */
@searchMobileMaxWidth: ~"calc(100vw - 2rem)";

/* Result Box */
@searchResultsWidth: 18em;
@searchResultsBackground: #FFFFFF;
@searchResultsDistance: 0.5em;
@searchResultsBorderRadius: @defaultBorderRadius;
@searchResultsBorder: 1px solid @solidBorderColor;
@searchResultsBoxShadow: @floatingShadow;

/* Result */
@searchResultFontSize: 1em;
@searchResultVerticalPadding: @relativeTiny;
@searchResultHorizontalPadding: @relativeLarge;
@searchResultPadding: @searchResultVerticalPadding @searchResultHorizontalPadding;
@searchResultTextColor: @textColor;
@searchResultLineHeight: 1.33;
@searchResultDivider: 1px solid @internalBorderColor;
@searchResultLastDivider: none;

/* Result Image */
@searchResultImageFloat: right;
@searchResultImageBackground: none;
@searchResultImageWidth: 5em;
@searchResultImageHeight: 3em;
@searchResultImageBorderRadius: 0.25em;
@searchResultImageMargin: 0em 6em 0em 0em;

/* Result Content */
@searchResultTitleFont: @headerFont;
@searchResultTitleMargin: -@headerLineHeightOffset 0em 0em;
@searchResultTitleFontWeight: @bold;
@searchResultTitleFontSize: @relativeMedium;
@searchResultTitleColor: @darkTextColor;

/* Description */
@searchResultDescriptionFontSize: @relativeSmall;
@searchResultDescriptionDistance: 0;
@searchResultDescriptionColor: @lightTextColor;

/* Price */
@searchResultPriceFloat: right;
@searchResultPriceColor: @green;

/* Special Message */
@searchMessageVerticalPadding: 1em;
@searchMessageHorizontalPadding: 1em;
@searchMessageHeaderFontSize: @medium;
@searchMessageHeaderFontWeight: @bold;
@searchMessageHeaderColor: @textColor;
@searchMessageDescriptionDistance: 0.25rem;
@searchMessageDescriptionFontSize: 1em;
@searchMessageDescriptionColor: @textColor;

/* All Results Link */
@searchActionBorder: none;
@searchActionBackground: @darkWhite;
@searchActionPadding: @relativeSmall @relativeMedium;
@searchActionColor: @textColor;
@searchActionFontWeight: @bold;
@searchActionAlign: center;


/*******************************
            States
*******************************/

/* Focus */
@searchPromptFocusBackground: @searchPromptBackground;
@searchPromptFocusBorderColor: @selectedBorderColor;
@searchPromptFocusColor: @selectedTextColor;

/* Hover */
@searchResultHoverBackground: @offWhite;
@searchActionHoverBackground: #E0E0E0;

/* Loading */
@searchInvertedLoaderFillColor: rgba(0, 0, 0, 0.15);

/* Active Category */
@searchCategoryActiveBackground: @darkWhite;
@searchCategoryNameActiveColor: @textColor;

/* Active Result */
@searchResultActiveBorderLeft: @internalBorderColor;
@searchResultActiveBackground: @darkWhite;
@searchResultActiveBoxShadow: none;
@searchResultActiveTitleColor: @darkTextColor;
@searchResultActiveDescriptionColor: @darkTextColor;
@searchResultsZIndex: 998;


/*******************************
            Types
*******************************/

/* Selection */
@searchSelectionPromptBorderRadius: @defaultBorderRadius;

@searchSelectionCloseTop: 0em;
@selectionCloseTransition:
  color @defaultDuration @defaultEasing,
  opacity @defaultDuration @defaultEasing
;
@searchSelectionCloseRight: 0em;
@searchSelectionCloseIconOpacity: 0.8;
@searchSelectionCloseIconColor: '';
@searchSelectionCloseIconHoverOpacity: 1;
@searchSelectionCloseIconHoverColor: @red;

@searchSelectionCloseIconInputRight: 1.85714em;

/* Category */
@searchCategoryBackground: @darkWhite;
@searchCategoryBoxShadow: none;
@searchCategoryDivider: 1px solid @internalBorderColor;
@categoryTransition:
  background @defaultDuration @defaultEasing,
  border-color @defaultDuration @defaultEasing
;

@searchCategoryResultsWidth: 28em;

@searchCategoryResultBackground: @white;
@searchCategoryResultLeftBorder: 1px solid @borderColor;
@searchCategoryResultDivider: @searchResultDivider;
@searchCategoryResultLastDivider: none;
@searchCategoryResultPadding: @searchResultPadding;
@searchCategoryResultTransition: @categoryTransition;

@searchCategoryNameWidth: 100px;
@searchCategoryNameBackground: transparent;
@searchCategoryNameFont: @pageFont;
@searchCategoryNameFontSize: 1em;
@searchCategoryNameWhitespace: nowrap;
@searchCategoryNamePadding: 0.4em 1em;
@searchCategoryNameFontWeight: @bold;
@searchCategoryNameColor: @lightTextColor;