/**
 * Color Palette
 *
 * Variable names are based on similar CSS extended color keyword values.
 *
 * @see https://www.w3.org/TR/2018/REC-css-color-3-20180619/#svg-color
 */

$color-black: #2a2b2c;
$color-blue: #3643ba;
$color-darkgray: #464646;
$color-gray: #acb3b8;
$color-lime: #3643ba;
$color-silver: #f3f3f3;
$color-white: #fff;
$color-red: #e53322;

/**
 * Border Width
 */

$border-width-sm: 1px;
$border-width-md: 2px;
$border-width-lg: 3px;
$border-width-xl: 6px;

/**
 * Sizing
 */

$size-unit: .25rem;
$max-icon-width: 17px;

$fullscreen-md: calc(100vh - 152px);
$fullscreen-lg: calc(100vh - 116px);
$fullscreen-psn-md: calc(100vh - 200px);
$fullscreen-psn-lg: calc(100vh - 165px);

/**
 * Utilities
 *
 * @TODO: 
 * 1. determine the necessity of these "rouge" utilities
 */

.de-blue-hr {
  height: calc(#{$size-unit} / 2);
  border: none;
  margin-bottom: calc(#{$size-unit} * 5);
}

.de-u-iconContainer {
  max-width: 17px;
}

/**
 * Components
 */

.de-StoreFinder {
  position: relative;
 }

/**
 * Has priority nav
 */

.de-is-priorityNav .de-StoreFinder {

  @media (min-width: 960px) and (max-width: 999px) {
    height: auto;
  }

  @media (min-width: 1000px) {
    min-height: $fullscreen-psn-md
  }
  
  @media (min-width: 1400px) {
    min-height: $fullscreen-psn-lg;
  }
}

/**
 * Does not have priority nav
 */

body:not(.de-is-priorityNav) .de-StoreFinder {

  @media (min-width: 60em) {
    min-height: $fullscreen-md;
  }

  @media (min-width: 1000px) {
    min-height: $fullscreen-md;
  }
  
  @media (min-width: 1400px) {
    min-height: $fullscreen-lg;
  }
}

.de-StoreMap {
  height: 300px;
}

/**
 * Has priority nav
 */

.de-is-priorityNav .de-StoreMap {

  @media (min-width: 960px) and (max-width: 999px) {
    height: calc(100vh - 552px);
  }

  @media (min-width: 1000px) {
    min-height: $fullscreen-psn-md;
  }
  
  @media (min-width: 1400px) {
    min-height: $fullscreen-psn-lg;
  }
}

/**
 * Does not have priority nav
 */

body:not(.de-is-priorityNav) .de-StoreMap {

  @media (min-width: 960px) and (max-width: 999px) {
    height: calc(100vh - 504px);
  }

  @media (min-width: 1000px) {
    min-height: $fullscreen-md;
  }

  @media (min-width: 1400px) {
    min-height: $fullscreen-lg;
  }
}

.de-StoreController {
  min-height: 375px;
  background: white;
  border-bottom: calc(#{$size-unit} / 2) solid $color-lime;
}

@media (min-width: 1000px) {
  .de-StoreController {
    left: 40px;
    max-width: 404px;
    position: absolute;
    top: 100px;
    width: 350px;
    z-index: 10;
  }
}

.de-StoreController-loader {
  height: 192px;
}

.de-StoreSearch-inputWrapper {
  border: $border-width-md solid $color-silver;
  position: relative;
}

.de-StoreSearch-inputWrapper:hover,
.de-StoreSearch-inputWrapper.isFocused {
  border-color: $color-blue;
}

.de-StoreSearch-input,
.de-StoreSearch-input:hover,
.de-StoreSearch-input:focus {
  background: transparent;
  border: unset;
  width: calc(100% - 46px);
  padding-right: calc(#{$size-unit} * 9);
}

.de-StoreSearch-clear {
  position: absolute;
  top: 50%;
  right: calc(#{$size-unit} * 11);
  width: calc(#{$size-unit} * 6);
  height: calc(#{$size-unit} * 6);
  transform: translate(-50%, -50%);
}

.de-StoreSearch-submit {
  color: $color-black;
}

.de-StoreSearch-submit .de-Icon {
  height: 24px;
  width: 24px;
}

.de-StoreSearch-submit.isFocused {
  background-color: $color-blue;
  color: $color-white;
}

.de-StoreTile {
  appearance: none;
  background: transparent;
  border: $border-width-md solid $color-white;
  border-top: $border-width-md solid $color-silver;
  text-align: left;
  margin-top: $border-width-md;
  -moz-appearance: none;
  outline: 0;
  -webkit-appearance: none;
  width: 100%;
}

.de-StoreTile.de-is-active {
  border-color: $color-blue;
}

.de-StoreTile-address {
  margin-top: $size-unit;
}

.de-StoreTile-actionsButton:first-child {
  margin-left: auto;
}

.de-StoreNoLocations-inputWrapper {
  position: relative;
}

.de-StoreNoLocations-input,
.de-StoreNoLocations-input:hover,
.de-StoreNoLocations-input:focus {
  border: $border-width-md solid $color-silver;
  border-right: unset;
  width: calc(100% - 80px);
}

.de-StoreNoLocations-input:hover,
.de-StoreNoLocations-input:focus {
  border-color: $color-blue;
}

.de-StoreNoLocations-submit {
  color: $color-white;
  width: 80px;
}

.de-StoreNoLocations-checkbox {
  border: $border-width-sm solid $color-blue;
  border-radius: $size-unit;
  color: $color-white;
  width: 20px;
  height: 20px;
}

.de-StoreNoLocations-checkbox .de-Icon {
  width: 10px;
}

/**
 * Remove extra margin on footer (only effects '/pages/store-finder')
 */

.blue-band--footer {
  margin-top: unset;
}