@import url("../index.scss");
@import url("../typography.scss");

.digit-mobile-number-container {
  @apply flex  items-center;
  width: 100%;

  @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4)  {
    /* Media query for tablets */
    max-width: 27.5rem;
    min-width: 12.5rem;
  }

  @media (max-aspect-ratio: 9/16) {
    /* Media query for mobile */
    max-width:100%;
    min-width: 9.75rem;
    width: 100%;
  }

  @media (min-aspect-ratio: 3/4) {
    /* Media query for desktop */
    max-width: 37.5rem;
    min-width: 12.5rem;
  }
  
  .digit-text-mobile-input-width {
    .digit-text-input-width {
      width: calc(540px - 41px);
    }
  }
  .digit-citizen-card-input--front {
    @extend .typography.text-body-s;
    @extend .light-background;
    width: fit-content !important;
    display: flex;
    align-items: center;
    /* background: theme(colors.grey.mid); */
    border-right: 0;
    padding-right: 5px;
  }

  .digit-citizen-card-input {
    @extend .typography.text-body-s;
    @apply pl-sm outline-none block w-full h-10 bg-white leading-10 text-form-field;
    border: 1px solid theme(digitv2.lightTheme.text-secondary);
    color: theme(digitv2.lightTheme.text-primary);
  }

  .digit-citizen-card-input--front {
    @extend .typography.text-body-s;
    width: fit-content !important;
    display: flex;
    align-items: center;
    background: theme(colors.grey.mid);
    border-right: 0;
    padding-right: 5px;
  }
  .digit-employee-card-input-error {
    @extend .typography.text-body-s;
    @extend .light-input-border;
    @extend .alert-error;
    @apply mb-lg pl-sm block w-full h-10 outline-none border-2 border-solid bg-white leading-10 text-form-field text-text-primary;
  }
}