@import "metadata";

:root {
  //* rgba is needed for the selected country hover state to blend in with the border-highlighting some browsers give the input on focus.
  --iti-hover-color: rgba(0, 0, 0, 0.05);
  --iti-text-gray: #999;
  --iti-border-gray: #ccc;

  --iti-spacer-horizontal: 8px;
  --iti-flag-height: 15px;
  --iti-flag-width: 20px;
  //* 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.
  --iti-border-width: 1px;

  --iti-arrow-height: 4px;
  --iti-arrow-width: 6px;
  --iti-triangle-border: calc(var(--iti-arrow-width) / 2);
  --iti-arrow-padding: 6px;
  --iti-arrow-color: #555;

  --iti-input-padding: 6px;
  --iti-right-hand-selected-country-padding: calc(var(--iti-spacer-horizontal) + var(--iti-spacer-horizontal) + var(--iti-flag-width));
  --iti-selected-country-arrow-padding: calc(var(--iti-arrow-padding) + var(--iti-arrow-padding) + var(--iti-flag-width) + var(--iti-spacer-horizontal) + var(--iti-arrow-width) + var(--iti-input-padding));

  //* Image related variables.
  --iti-path-flags-1x: url('../img/flags.png?1');
  --iti-path-flags-2x: url('../img/flags@2x.png?1');
  --iti-path-globe-1x: url('../img/globe.png');
  --iti-path-globe-2x: url('../img/globe@2x.png');

  --iti-flag-sprite-width: #{map-get($flags-sprite-1x, width)};
  --iti-flag-sprite-height: #{map-get($flags-sprite-1x, height)};

  //* Enough space for them to click off to close.
  --iti-mobile-popup-margin: 30px;
}

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

  //* Paul Irish (paulirish) 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;
  }

  &__a11y-text {
    width: 1px;
    height: 1px;
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    position: absolute;
  }

  //* 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 country 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;

    //* Makes space for the selected country 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: var(--iti-right-hand-selected-country-padding);

    //* Any margin-right here will push the selected-country away.
    margin-right: 0;
  }

  &__country-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: var(--iti-border-width);
  }

  //* Now a button element.
  &__selected-country {
    //* 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%;

    //* Reset button styles (can't use all:unset as lose browser default focus outline styles).
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    border-radius: 0;
    font-weight: inherit;
    line-height: inherit;
    text-decoration: none;
  }

  &__selected-country-primary {
    display: flex;
    align-items: center;
    //* This must be full-height for the hover highlight.
    height: 100%;
    padding: 0 var(--iti-arrow-padding) 0 var(--iti-spacer-horizontal);
  }

  &__arrow {
    margin-left: var(--iti-arrow-padding);

    //* CSS triangle.
    width: 0;
    height: 0;
    border-left: var(--iti-triangle-border) solid transparent;
    border-right: var(--iti-triangle-border) solid transparent;
    border-top: var(--iti-arrow-height) solid var(--iti-arrow-color);

    [dir="rtl"] & {
      margin-right: var(--iti-arrow-padding);
      margin-left: 0;
    }

    &--up {
      border-top: none;
      border-bottom: var(--iti-arrow-height) solid var(--iti-arrow-color);
    }
  }

  //* 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: calc(var(--iti-border-width) * -1);

      border: var(--iti-border-width) solid var(--iti-border-gray);
      box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
    }

    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 var(--iti-border-gray);
    }
  }
  &__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 raising 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: var(--iti-flag-width);
  }

  //* 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 var(--iti-spacer-horizontal);
    outline: none;
  }

  //* The dial codes after the country names are greyed out.
  &__dial-code {
    color: var(--iti-text-gray);
  }
  &__country.iti__highlight {
    background-color: var(--iti-hover-color);
  }

  //* Spacing between country flag, name and dial code.
  &__flag-box,
  &__country-name {
    margin-right: var(--iti-spacer-horizontal);

    [dir="rtl"] & {
      margin-right: 0;
      margin-left: var(--iti-spacer-horizontal);
    }
  }

  //* This setting moves the selected country to left of input.
  &--allow-dropdown {
    input.iti__tel-input,
    input.iti__tel-input[type="text"],
    input.iti__tel-input[type="tel"] {
      padding-right: var(--iti-input-padding);
      padding-left: var(--iti-selected-country-arrow-padding);
      margin-left: 0;

      [dir="rtl"] & {
        padding-right: var(--iti-selected-country-arrow-padding);
        padding-left: var(--iti-input-padding);
        margin-right: 0;
      }
    }
    .iti__country-container {
      right: auto;
      left: 0;

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

  &--allow-dropdown {
    //* Hover state - show country is clickable (unless the input is disabled or readonly)
    .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) {
      //* When you hover anything in the container, use cursor:pointer.
      &:hover {
        //* Adds specificity to override default browser button cursor styling.
        &, & button {
          cursor: pointer;
        }
      }
      //* Only show hover background colour when you hover (1) selected flag/arrow or (2) dropdown contents, but NOT when you hover the selected dial code, which would feel weird.
      .iti__selected-country-primary:hover,
      .iti__selected-country:has(+ .iti__dropdown-content:hover) .iti__selected-country-primary {
        background-color: var(--iti-hover-color);
      }
    }
  }

  .iti__selected-dial-code {
    margin-left: 4px;

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

  //* 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 .country-container.
    padding: var(--iti-border-width);
    &: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: var(--iti-mobile-popup-margin);
    //* Short country lists should be vertically centred.
    display: flex;
    flex-direction: column;
    //* The country search input auto-focuses, so mobile keyboard appears, so stick to top (also because when filter countries down, the height changes and the vertical centring would make it jump around).
    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;
  }
}

.iti__flag {
  --iti-flag-offset: 0px;
  --iti-flag-width: #{$most-common-flag-width};
  --iti-flag-height: #{$most-common-flag-height};

  height: var(--iti-flag-height);
  width: var(--iti-flag-width);
  box-shadow: 0px 0px 1px 0px #888;
  background-image: var(--iti-path-flags-1x);
  background-repeat: no-repeat;
  background-position: var(--iti-flag-offset) 0;
  background-size: var(--iti-flag-sprite-width) var(--iti-flag-sprite-height);
}

//* Creates placeholders for flag widths.
@each $width in $unique-flag-widths {
  %flag-width-#{$width} {
    --iti-flag-width: #{$width};
  }
}

//* Creates placeholders for flag heights.
@each $height in $unique-flag-heights {
  %flag-height-#{$height} {
    --iti-flag-height: #{$height};
  }
}

@each $country-code, $values in $flags {
  $flag-width: map-get($values, width);
  $flag-height: map-get($values, height);
  $flag-offset: map-get($values, offset);

  .iti__#{$country-code} {
    @if $flag-width != $most-common-flag-width {
      @extend %flag-width-#{$flag-width};
    }
    @if $flag-height != $most-common-flag-height {
      @extend %flag-height-#{$flag-height};
    }
    --iti-flag-offset: #{$flag-offset};
  }
}

//* Empty state.
.iti__globe {
  background-image: var(--iti-path-globe-1x);
  background-size: contain;
  background-position: right;
  box-shadow: none;
  height: 19px;
}

//* Media query for high PPI/Retina Displays.
@media (min-resolution: 2x) {
  .iti__flag { background-image: var(--iti-path-flags-2x); }
  .iti__globe { background-image: var(--iti-path-globe-2x); }
}