@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;
@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;
@import 'node_modules/intl-tel-input/build/css/intlTelInput.css';

@include compatMixins.sky-default-overrides('.sky-phone-field-country-btn') {
  --sky-override-phone-field-flag-transform: scaleX(1.25) translateX(2px);
  --sky-override-phone-field-flag-min-width: 20px;
  --sky-override-phone-field-flag-display: block;
  --sky-override-phone-field-input-box-country-button-padding: 6px 12px;
}

@include compatMixins.sky-default-overrides('.sky-phone-field') {
  .sky-phone-field-search-btn-dismiss {
    border-color: transparent;
  }
}

@include compatMixins.sky-modern-overrides(
  '.sky-phone-field-country-btn',
  false
) {
  --sky-override-phone-field-flag-transform: scaleX(1.25) translateX(2px);
  --sky-override-phone-field-flag-min-width: var(--modern-size-20);
  --sky-override-phone-field-flag-display: block;
  --sky-override-phone-field-input-box-country-button-padding: 0 17px 0 18px;
}

.sky-phone-field-country-btn {
  .sky-btn {
    // NOTE: This rule is set for non-input box phone fields. Remove when support for this is fully removed.
    border-radius: 0;
  }
}

.sky-phone-field-container {
  width: 100%;
  display: flex;
}

.sky-phone-field-country-search {
  flex-grow: 1;
}

// Default only style for the dismiss icon in input boxes
.sky-input-box {
  .sky-phone-field-search-btn-dismiss .fa-lg {
    vertical-align: -10%;
  }
}

.sky-input-box {
  .sky-phone-field-country-btn.sky-input-group-btn .sky-btn {
    padding: var(--sky-override-phone-field-input-box-country-button-padding);
  }
}

.sky-phone-field-country-btn {
  .sky-phone-field-flag {
    min-width: var(--sky-override-phone-field-flag-min-width);
    display: var(--sky-override-phone-field-flag-display, inline-block);
  }

  .iti__flag {
    background-image: url(https://sky.blackbaudcdn.net/static/skyux-public-assets/1.0.0-beta.4/assets/images/intl-tel-input/flags@2x.webp) !important;
    transform: var(--sky-override-phone-field-flag-transform, none);
  }
}
