@import "intl-tel-input/build/css/intlTelInput.css";
@import "../tokens/colors";

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

.pb_phone_number_input {
  input::placeholder {
    color: $focus_input_light;
  }

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

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

  .iti__country {
    padding: 5px 10px 5px 16px;
    transition: $transition_default;
  }

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

  .iti__selected-flag {
    padding: 0 $space_xxs 0 $space_sm;
    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--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
    background-color: $focus_input_light;
  }

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

  .iti__flag {
    border-radius: 1px;
  }

  .iti--separate-dial-code {
    width: 100%;
  }

  .iti--separate-dial-code .iti__selected-flag {
    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(-(calc($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;
  }

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

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

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

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

    .iti__selected-flag {
      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;
      }
    }
  }
}