@import '~react-phone-input-2/lib/style.css';

.react-tel-input.ebs-input-phone {
  position: relative;

  &.active .form-control,
  &.active .flag-dropdown {
    border-color: var(--primary-color);
    background-color: $white;
    color: $heading-color;
  }

  &.disabled .form-control,
  &.disabled .flag-dropdown {
    border-color: $grey-500;
    background-color: $white;
    color: $grey-500;
    cursor: not-allowed;

    @include placeholder {
      color: $grey-500;
    }
  }

  &.has-error .form-control,
  &.has-error .flag-dropdown {
    border-color: $danger-color;
    background-color: $white;
  }

  &-dropdown.country-list {
    padding: rem(4px);
    @include hiddenScroll;
    @include elevation-2;
    border-radius: rem($border-radius);

    .country {
      font-size: rem(14px);
      color: $text-color;
      padding: rem(6px);
      @include fontRegular;
    }

    .country.highlight,
    .country:hover,
    .country[aria-selected='true'] {
      background-color: var(--primary-000);
      border-radius: rem($border-radius);
    }

    .country[aria-selected='true'] {
      color: var(--primary-color);

      .dial-code {
        color: var(--primary-400);
      }
    }

    .country .dial-code {
      color: $text-color-secondary;
    }
  }

  .form-control {
    width: 100%;
    border-radius: rem($border-radius);
    height: rem($base-size);
    font-size: rem($font-size-base);

    @include placeholder {
      color: $text-color-secondary;
    }
  }

  .form-control,
  .flag-dropdown {
    border: 1px solid $border-color;
    background-color: $white;
  }

  &-dropdown {
    &::-webkit-scrollbar {
      width: rem($scrollbar-size) !important;
      height: rem($scrollbar-size) !important;
    }

    /* Track */
    &::-webkit-scrollbar-track {
      background: $scrollbar-track-background-color !important;
    }

    /* Handle */
    &::-webkit-scrollbar-thumb {
      background: $scrollbar-thumb-background-color !important;
    }

    /* Handle on hover */
    &::-webkit-scrollbar-thumb:hover {
      background: $scrollbar-thumb-hover-background-color !important;
    }
  }
}

.ebs-input-phone {
  &__dropdown {
    @include fadeAnimation;
  }

  &__wrapper-container {
    position: relative;

    // Sizes
    &--small .react-tel-input .form-control {
      height: rem($base-size-sm);
    }
    &--large .react-tel-input .form-control {
      height: rem($base-size-lg);
    }
  }

  &__clear {
    position: absolute;
    cursor: pointer;
    top: 50%;
    color: $text-color;
    right: calc(#{rem($gutter-size)} / 2);
    font-size: rem(22px);
    padding: rem(0 7px);
    margin: rem(0 -7px);
    transform: translate3d(0, -50%, 0);
  }
}
