$ion-border-base     : color-mix(in srgb, var(--ion-color-medium) 30%, transparent 70%);
$ion-border-contrast : var(--ion-color-medium);
$ion-border-invalid  : color-mix(in srgb, var(--ion-color-danger) 75%, transparent 25%);

$input-height: 58px;

.on-hover{
  background: color-mix(in srgb, var(--ion-color-light) 97%, transparent 3%);
  &:hover{
    @apply transition-all ease-in-out duration-300;
    background: color-mix(in srgb, var(--ion-color-dark) 15%, transparent 93%);
  }
}

ion-card.ion-card-input{
  @apply rounded-2xl w-full h-full flex justify-center items-center transition-all ease-in-out duration-300 m-0 overflow-hidden shadow-none;
  background: color-mix(in srgb, var(--ion-color-light) 97%, transparent 3%);
  &:hover{
      background: color-mix(in srgb, var(--ion-color-dark) 15%, transparent 93%);
  }
  border-bottom-color: $ion-border-contrast;
  border-right-color : $ion-border-base;
  border-top-color   : $ion-border-base;
  border-left-color  : $ion-border-base;
  
  border-width: 1px 1px 2px 1px;
  &.submitted.invalid{
    border-color: $ion-border-invalid !important;
  }
  &.disabled{
    background-color: color-mix(in srgb, var(--ion-color-medium) 30%, transparent 70%) !important; 
  }
  ion-card-content{ @apply size-full bg-transparent p-0; }

  min-height: $input-height;
  max-height: $input-height;
  height: $input-height;
}
ion-item{
  --background: transparent;
}

ion-text#label{
  &.required{
      &::after {
          content: "*";
          color: var(--ion-color-danger);
          vertical-align: text-bottom;
          font-size: small;
      }
  }
  &:not(.required)::after{ 
      content: var(--input-opcional-label, "(Opcional)");
      color: var(--ion-color-medium);
      vertical-align: text-bottom;
      font-size: small;
  }
}

.on-focus{
  border-bottom-color: var(--ion-color-primary);
}
.focus-within\:on-focus{
  &:focus-within{
    border-bottom-color: var(--ion-color-primary);
  }
}