@use "sass:math";

// NOTE: by using !default on all variables, we're saying only declare the variable if it doesn't
// already exist, which allows devs to declare these variables themselves and assign them any value
// they want before importing this file

// rgba is needed for the selected flag hover state to blend in with
// the border-highlighting some browsers give the input on focus
$hoverColor: rgba(0, 0, 0, 0.05) !default;
$greyText: #999 !default;
$greyBorder: #ccc !default;

$horizontalSpacer: 8px !default;
$flagHeight: 15px !default;
$flagWidth: 20px !default;
// this border width is used for the popup and divider, but it is also
// assumed to be the border width of the input, which we do not control
$borderWidth: 1px !default;

$arrowHeight: 4px !default;
$arrowWidth: 6px !default;
$triangleBorder: math.div($arrowWidth, 2) !default;
$arrowPadding: $arrowWidth !default;
$arrowColor: #555 !default;

$inputPadding: 6px !default;
$rightHandSelectedFlagWidth: $flagWidth + (2 * $horizontalSpacer) !default;
$selectedFlagArrowWidth: $flagWidth + $horizontalSpacer + $arrowWidth +
  (2 * $arrowPadding) !default;

// image related variables
$flagsImagePath: "../img/" !default;
$flagsImageName: "flags" !default;
$flagsImageExtension: "png" !default;
// cache busting when we update the sprite
$flagsImageQuery: "?1" !default;

// enough space for them to click off to close
$mobilePopupMargin: 30px !default;

.iti {
  // need position on the container so the selected flag can be
  // absolutely positioned over the input
  position: relative;
  // keep the input's default inline properties
  display: inline-block;

  // paul irish says this is ok
  // http://www.paulirish.com/2012/box-sizing-border-box-ftw/
  * {
    box-sizing: border-box;
  }

  &__hide {
    display: none;
  }
  // need this during init, to get the height of the dropdown
  &__v-hide {
    visibility: hidden;
  }

  // specify types to increase specificity e.g. to override bootstrap v2.3
  input.iti__tel-input,
  input.iti__tel-input[type="text"],
  input.iti__tel-input[type="tel"] {
    position: relative;
    // input is bottom level, below selected flag and dropdown
    z-index: 0;

    // any vertical margin the user has on their inputs would no longer work as expected
    // because we wrap everything in a container div. i justify the use of !important
    // here because i don't think the user should ever have vertical margin here - when
    // the input is wrapped in a container, vertical margin messes up alignment with other
    // inline elements (e.g. an adjacent button) in firefox, and probably other browsers.
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    // make space for the selected flag on right of input (if disabled allowDropdown)
    // Note: no !important here, as the user may want to tweak this so that the
    // perceived input padding matches their existing styles
    padding-right: $rightHandSelectedFlagWidth;

    // any margin-right here will push the selected-flag away
    margin-right: 0;
  }

  &__flag-container {
    // positioned over the top of the input
    position: absolute;
    // full height
    top: 0;
    bottom: 0;
    right: 0;
    // prevent the highlighted child from overlapping the input border
    padding: $borderWidth;
  }

  &__selected-flag {
    // render above the input
    z-index: 1;
    position: relative;
    display: flex;
    align-items: center;
    // this must be full-height both for the hover highlight, and to push down the
    // dropdown so it appears below the input
    height: 100%;
    padding: 0 $arrowPadding 0 $horizontalSpacer;
  }

  &__arrow {
    margin-left: $arrowPadding;

    // css triangle
    width: 0;
    height: 0;
    border-left: $triangleBorder solid transparent;
    border-right: $triangleBorder solid transparent;
    border-top: $arrowHeight solid $arrowColor;

    [dir="rtl"] & {
      margin-right: $arrowPadding;
      margin-left: 0;
    }

    &--up {
      border-top: none;
      border-bottom: $arrowHeight solid $arrowColor;
    }
  }

  // the dropdown
  &__dropdown-content {
    .iti--inline-dropdown & {
      position: absolute;
      // popup so render above everything else
      z-index: 2;
      
      // since (sometimes) adding a search input in the dropdown, better to make the dropdown look a bit more distinct from the tel input, to reduce confusion between the two inputs
      margin-top: 3px;
      
      // margin-left to compensate for the padding on the parent
      margin-left: (-$borderWidth);
      
      border: $borderWidth solid $greyBorder;
      box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
    }
    
    // place menu above the input element
    &--dropup {
      bottom: 100%;
      margin-bottom: 3px;
    }
    
    border-radius: 3px;
    background-color: white;
  }
  &__search-input {
    width: 100%;
    border-width: 0;
    border-radius: 3px;
    padding: 9px 12px;

    & + .iti__country-list {
      border-top: 1px solid $greyBorder;
    }
  }
  &__country-list {
    // override default list styles
    list-style: none;
    padding: 0;
    margin: 0;

    overflow-y: scroll;
    // Fixes https://github.com/jackocnr/intl-tel-input/issues/765
    // Apple still hasn't fixed the issue where setting overflow: scroll on a div element does not use inertia scrolling
    // If this is not set, then the country list scroll stops moving after rasing a finger, and users report that scroll is slow
    // Stackoverflow question about it: https://stackoverflow.com/questions/33601165/scrolling-slow-on-mobile-ios-when-using-overflowscroll
    -webkit-overflow-scrolling: touch;

    .iti--inline-dropdown & {
      max-height: 185px;
    }
  }
  &--flexible-dropdown-width &__country-list {
    // don't let the contents wrap AKA the container will be as wide as the contents
    white-space: nowrap;

    // except on small screens, where we force the dropdown width to match the input
    @media (max-width: 500px) {
      white-space: normal;
    }
  }

  // dropdown flags need consistent width, so wrap in a container
  &__flag-box {
    display: inline-block;
    width: $flagWidth;
  }

  // the divider below the preferred countries
  &__divider {
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: $borderWidth solid $greyBorder;
  }

  // each country item in dropdown (we must have separate class to differentiate from dividers)
  &__country {
    // Note: decided not to use line-height here for alignment because it causes issues e.g. large font-sizes will overlap, and also looks bad if one country overflows onto 2 lines
    display: flex;
    align-items: center;
    padding: 8px $horizontalSpacer;
    outline: none;
  }

  // the dial codes after the country names are greyed out
  &__dial-code {
    color: $greyText;
  }
  &__country.iti__highlight {
    background-color: $hoverColor;
  }

  // spacing between country flag, name and dial code
  &__flag-box,
  &__country-name {
    margin-right: $horizontalSpacer;

    [dir="rtl"] & {
      margin-right: 0;
      margin-left: $horizontalSpacer;
    }
  }

  // these settings are independent of each other, but both move selected flag to left of input
  &--allow-dropdown,
  &--show-selected-dial-code {
    input.iti__tel-input,
    input.iti__tel-input[type="text"],
    input.iti__tel-input[type="tel"] {
      padding-right: $inputPadding;
      padding-left: $selectedFlagArrowWidth + $inputPadding;
      margin-left: 0;

      [dir="rtl"] & {
        padding-right: $selectedFlagArrowWidth + $inputPadding;
        padding-left: $inputPadding;
        margin-right: 0;
      }
    }
    .iti__flag-container {
      right: auto;
      left: 0;

      [dir="rtl"] & {
        right: 0;
        left: auto;
      }
    }
  }

  &--allow-dropdown {
    // hover state - show flag is clickable
    .iti__flag-container:hover {
      cursor: pointer;
      .iti__selected-flag {
        background-color: $hoverColor;
      }
    }
    // disable hover state when input is disabled
    .iti__flag-container:has(+ input[disabled]):hover,
    .iti__flag-container:has(+ input[readonly]):hover {
      cursor: default;
      .iti__selected-flag {
        background-color: transparent;
      }
    }
  }

  &--show-selected-dial-code {
    .iti__selected-flag {
      // now that we have digits in this section, it needs this visual separation
      background-color: $hoverColor;
    }
    &.iti--show-flags .iti__selected-dial-code {
      margin-left: $arrowPadding;

      [dir="rtl"] & {
        margin-left: 0;
        margin-right: $arrowPadding;
      }
    }
  }

  // if dropdownContainer option is set, increase z-index to prevent display issues
  &--container {
    position: fixed;
    top: -1000px;
    left: -1000px;
    // higher than default Bootstrap modal z-index of 1050
    z-index: 1060;
    // to keep styling consistent with .flag-container
    padding: $borderWidth;
    &:hover {
      cursor: pointer;
    }
  }
}

// overrides for mobile popup
.iti--fullscreen-popup {
  &.iti--container {
    background-color: rgba(0, 0, 0, 0.5);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    padding: $mobilePopupMargin;
    // short country lists should be vertically centered
    display: flex;
    flex-direction: column;
    justify-content: center;
    // when country search enabled, the search input auto-focuses, so mobile keyboard appears, so stick to top
    // (also because when filter countries down, the height changes and the vertical centering would make it jump around)
    &.iti--country-search {
      justify-content: flex-start;
    }
  }
  .iti__dropdown-content {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    position: relative; // override needed in order to get full-width working properly
  }
  .iti__country {
    padding: 10px 10px;
    // increase line height because dropdown copy is v likely to overflow on mobile and when it does it needs to be well spaced
    line-height: 1.5em;
  }
}

@import "sprite";

.iti__flag {
  height: $flagHeight;
  box-shadow: 0px 0px 1px 0px #888;
  background-image: url("#{$flagsImagePath}#{$flagsImageName}.#{$flagsImageExtension}#{$flagsImageQuery}");
  background-repeat: no-repeat;
  background-position: $flagWidth 0;

  @media (min-resolution: 2x) {
    background-image: url("#{$flagsImagePath}#{$flagsImageName}@2x.#{$flagsImageExtension}#{$flagsImageQuery}");
  }
}

// empty state
.iti__globe {
  background-image: url("#{$flagsImagePath}globe.png");
  background-size: contain;
  background-position: right;
  box-shadow: none;
  height: 19px;

  @media (min-resolution: 2x) {
    background-image: url("#{$flagsImagePath}globe@2x.png");
  }
}