// ion-button{
//   transition: all 1s;
// }

// ion-item.ion-touched, ion-item.ion-pristine{
//   --border-width: 0;
//   --border-color: var(--ion-color-dark)
//   --background: transparent !important;
// 	transition: border-color .5s;
// 	border-radius: 1rem;
// }

$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%);

ion-card{
  @apply rounded-2xl flex justify-center items-center transition-all ease-in-out duration-300 m-0 overflow-hidden shadow-sm;
  ion-card-content{
    @apply p-0;
  }
  background: color-mix(in srgb, var(--ion-color-light) 15%, transparent 93%);
  &: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;
  }
  ion-card-content{ @apply size-full bg-transparent p-0; }
}
ion-item{
  --background: transparent;
  @apply m-0;
}