@use '../utils/media';
@use '../utils/variables';
@use 'iti_general';


   .iti__flag {
     background-image: url('/images/iti/flags_sprite.png');
     height: 24px !important;
     width: 24px !important;
     background-color: transparent;
     box-shadow: none;
     border: none;
   }

  .iti__flag-box {
    width: max-content;
  }

  .iti {
    width: 100%;
    z-index: 10;
    display: flex;
    justify-content: flex-end;

    .iti__selected-dial-code {
      // color: white;
      // margin: 0 !important;
      // width: 40px;
      font-size: 21px;
      line-height: 36px;
      @include media.breakpoint-down('deskL') {
        font-size: 18px;
        line-height: 25.2px;
      }
      @include media.breakpoint-down('tabL') {
        font-size: 16px;
        line-height: 19.49px;
      }
      @include media.breakpoint-down('tabM') {
        font-size: 12px;
        line-height: 14.4px;
      }
    }

    .iti__country-list {
      border-radius: 8px;
      border: 1px solid variables.$dove2;
      top: 100%;
      min-height: 304px;
      overflow-x: hidden;
      padding: 8px 0;

      @include media.breakpoint-down('tabM') {
        top: initial;
        max-width: none;
        min-width: auto;
        min-height: auto;
      }

      &::-webkit-scrollbar {
        width: 4px;
        background: transparent;
      }

      &::-webkit-scrollbar-thumb {
        background: variables.$darkGray;
        border-radius: 4px;
      }
    }

    .iti__country {
      padding: 12px 16px;

      .iti__flag-box {
        margin-right: 10px;
      }


      &.iti__active {

        .iti__country-name {
        }
      }
    }

    .iti__country-name {
      display: inline-flex;
      white-space: initial;
    }


    .iti__arrow {
      display: none;
      border: none;
      width: 16px;
      height: 16px;
      background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.46852 11.3799C7.74789 11.7059 8.25211 11.7059 8.53148 11.3799L13.0095 6.15555C13.3987 5.70148 13.0761 5 12.478 5H3.52195C2.92391 5 2.60127 5.70148 2.99047 6.15555L7.46852 11.3799Z' fill='white'/%3E%3C/svg%3E%0A");
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
      margin: 0 !important;
    }

    .iti__arrow--up {
      background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.46852 4.62006C7.74789 4.29413 8.25211 4.29413 8.53148 4.62006L13.0095 9.84445C13.3987 10.2985 13.0761 11 12.478 11H3.52195C2.92391 11 2.60127 10.2985 2.99047 9.84445L7.46852 4.62006Z' fill='white'/%3E%3C/svg%3E%0A");
    }

    .iti__selected-flag {
      padding: 12px 30px ;
      color: variables.$graphite2;
      display: flex;
      background: transparent;

      @include media.breakpoint-down('tabM') {
        padding: 12px;
      }
    }

    .iti__flag-container {
      position: static;
      border: 1px solid variables.$graphite2;
      background-color: variables.$dove1;
      border-radius: 12px;
      width: fit-content;
      &:hover {
        .iti__selected-flag {
          background: transparent !important;
        }
      }
    }

    .inputFieldInput {
      padding: 27px 16px 9px 58px !important;
      margin-left: 148px;
      width: calc(100% - 148px);

      @include media.breakpoint-down('deskS') {
        font-size: 15px;
      }

      @include media.breakpoint-down('mobM') {
        font-size: 14px;
        padding: 20px 16px 3px 54px !important;
        margin-left: 128px !important;
        width: calc(100% - 128px);
      }
    }
  }

  .iti.iti--container {
    z-index: 101;

    @include media.breakpoint-down('tabM') {
      width: auto;
    }
  }

  .formFieldItemPhone {

    .inputFieldIcon {
      z-index: 11;
      left: 164px;

      @include media.breakpoint-down('mobM') {
        left: 140px;
      }
    }

    .inputFieldLabel {
      z-index: 11;
      left: 206px;

      @include media.breakpoint-down('mobM') {
        left: 182px;
      }
    }
  }