@use "sass:math";

@import "./intlTelInput";
@import "../tokens/colors";

$transform-rotate-deg: 135deg;
$dropdown-min-width: 340px;
$flag-min-resolution: 192dpi;

:root {
  --iti-arrow-padding: #{$space_xs};
  --iti-spacer-horizontal: #{$space_sm};
  --iti-path-flags-1x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags.png");
  --iti-path-flags-2x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");
  --iti-path-globe-1x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe.png");
  --iti-path-globe-2x: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe@2x.png");
}

.pb_phone_number_input {
  .iti {
    width: 100%;
  }

  .iti__flag {
    margin-right: 6px;
  }

  .iti__a11y-text {
    display: none;
  }

  .iti__selected-dial-code {
    font-family: $font_family_base;
    font-size: $font_base;
    line-height: 1.5;
    letter-spacing: $lspace_normal;
    font-weight: $regular;
    font-style: normal;
    text-rendering: optimizeLegibility;
    -moz-font-feature-settings: "liga" on;
    color: $charcoal;
  }

  // iti-spacer-horizontal's default is 8px, or $space_xs
  .iti__country-list .iti__flag, .iti__country-name {
    margin-right: $space_xs;
  }
  [dir=rtl] .iti__country-list .iti__flag, [dir=rtl] .iti__country-name {
    margin-right: 0;
    margin-left: $space_xs;
  }

  .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover,
  .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country:has(+ .iti__dropdown-content:hover) .iti__selected-country-primary {
    background-color: transparent;
  }

  input::placeholder {
    color: $focus_input_light;
  }

  .dropdown_open {
    .text_input {
      border-color: $primary !important;
    }

    .iti__selected-country:focus-visible {
      outline-style: none;
    }
  }

  .iti__country {
    padding: 5px $space_xs 5px $space_sm;
    transition: $transition_default;
  }

  .iti__divider {
    border-bottom: 1px solid $border_light !important;
  }

  .iti__selected-country-primary {
    display: flex;
    justify-content: center;
    align-items: center;
    .iti__flag {
      margin-right: 0;
    }
  }

  .iti__selected-country {
    position: absolute;
    top: 0;
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    border-width: 0;
    border-radius: $space_xxs;

    &[aria-expanded="true"] {
      color: $primary_action;
    }

    &:focus-visible {
      outline-style: solid;
      outline-color: $primary;
    }
  }

  .iti__country.iti__highlight {
    background-color: $hover_light;

    .iti__country-name, .iti__dial-code {
      color: $primary;
    }
  }

  .iti__country-container:hover + .text_input {
    background-color: $focus_input_light;
  }

  .iti__flag {
    background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags.png");
    border-radius: 1px;
  }

  .iti__flag.iti__globe {
    background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/globe.png");
    background-position: center;
    height: 16px;
    width: 16px;
    background-size: 16px 16px;
  }

  .iti--show-flags .iti__selected-country {
    background-color: rgba($white, $opacity_1);
  }

  .iti__arrow {
    border-left: unset;
    border-right: unset;
    border-top: unset;
    width: unset;
    height: unset;
    margin-bottom: $space_xxs;
  }

  .iti__arrow--up {
    border-bottom: unset;
  }

  .iti__arrow::before {
    border-style: solid;
    border-width: 1px 1px 0 0;
    content: '';
    display: inline-block;
    height: $space_xxs + 1px;
    left: 1px;
    position: relative;
    vertical-align: top;
    width: $space_xxs + 1px;
    top: $space_xs + 2px;
    transform: rotate($transform-rotate-deg);
    color: $slate;
  }

  .iti__arrow.iti__arrow--up::before {
    transform: rotate(-(math.div($transform-rotate-deg, 3)));
    top: $space_xs + 4px;
    color: $primary_action;
  }

  .iti__country-list .iti__country {
    display: flex;
    align-items: center;
  }

  .iti__flag-box,
  .iti__country-name,
  .iti__dial-code {
    flex-grow: 0;
  }

  .iti__dial-code {
    margin-right: $space_sm;
  }


  .iti__country-list .iti__country.iti__active::after {
    content: "";
    margin-left: auto;
    transform: rotate(45deg);
    height: 12px;
    width: 6px;
    border-bottom: 2px solid;
    border-right: 2px solid;
    border-radius: 1px;
  }

  .iti__dropdown-content {
    border-radius: $space_xs;
    border: 1px solid $border_light !important;
    position: absolute;
    top: 100%;
  }

  &.dark {
    .iti--allow-dropdown .iti__country-container {
      background-color: rgba($white, 0);

      &:hover {
        background-color: rgba($white, 0);

        &+ .text_input {
          background-color: rgba($white, 0.15);
        }

        .iti__selected-country {
          background-color: rgba($white, 0);
        }
      }
    }

    .iti__selected-country {
      background-color: rgba($white, 0);
      color: $white;
    }

    .iti__dropdown-content {
      border-radius: $space_xs;
      border: 1px solid $border_dark !important;
    }

    .iti__divider {
      border-bottom: 1px solid $border_dark !important;
    }

    .iti__country-list {
      background-color: $bg_dark;
      border: 1px solid $border_dark;

      .iti__highlight {
        background-color: $hover_dark;

        .iti__country-name {
          color: $text_dk_default;
        }

        .iti__dial-code {
          color: $text_lt_lighter;
          margin-right: $space_sm;
        }
      }
    }

    .iti__arrow.iti__arrow--up::before {
      color: $slate;
    }

    .dropdown_open {
      .text_input {
        background-color: rgba($white, 0.025) !important;
      }
    }

    .iti__selected-dial-code {
      color: $white;
    }
  }

  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
    .iti__flag {
      background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");
    }
  }
}