@mixin property($variable: variable, $syntax: "<color>", $inherits: true, $initial-value: #FF){
  @property --#{$variable} {
    syntax: $syntax;
    initial-value: $initial-value;
    inherits: $inherits;
  }
}

@include property(
  $variable: input-color, 
  $syntax: "<color>", 
  $inherits: false, 
  $initial-value: transparent
);


.input-container{
  // --border: 1px solid color-mix(in srgb, var(--input-color) 66%, transparent);
  // border-left: var(--border);
  // border-right: var(--border);
  // border-bottom: var(--border);
  // background-color: color-mix(in srgb, var(--ion-color-dark) 3%, transparent);
  //radial-gradient(ellipse at -20px top, hsl(from white h s l / 0.05), hsl(from white h s l / 0)), hsl(from var(--input-color-bg-light) h s l / .8)
  @apply px-3 rounded-xl py-1 relative cursor-text scale-100 shadow-md;
  &:hover{
    @apply brightness-90;
  }
  transition: 
    --input-color .2s ease-in-out,
    box-shadow .2s ease-in-out, 
    opacity .2s ease-in-out,
    filter .2s ease-in-out;


  --color: var(--ion-color-dark);
  --input-color: var(--input-background, var(--ion-color-step-250));
  --shadow: 0 3px 4px -1px rgb(0 0 0 / 0.1);
  --inset-shadow: var(--input-color) 0px 1.75px 2px 0px inset;
  --focused-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-medium) 35%, transparent);

  box-shadow: var(--inset-shadow), var(--shadow);
  will-change: box-shadow, filter opacity;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: radial-gradient(ellipse at 0px top, 
    hsl(from var(--input-color) h s l / 0.5), 
    hsl(from var(--input-color) h s l / 0.4)), 
    hsl(from var(--ion-color-light)  h s l / 0.8);

  &:focus-within, &:focus, &.manual-focus{
    box-shadow: var(--inset-shadow), var(--shadow), var(--focused-shadow);
    @apply brightness-90;
  }
  .input-label{
    pointer-events: none;
    @apply text-[--color] text-xs flex items-center justify-start gap-1 w-full max-w-full truncate min-w-0 h-4;
  }
  input, textarea{
    @apply outline-none text-sm rounded-md bg-transparent w-full text-[--ion-color-dark] h-6;
  }
  &.loading{
    cursor: wait !important;
  }

  &.required .input-label::after{
    content: "*";
    color: var(--ion-color-danger);
    vertical-align: bottom;
  }
  &.submitted.invalid{
    --input-color: color-mix(in srgb, var(--ion-color-danger) 50%, transparent);
  }
  &.disabled{
    @apply cursor-not-allowed opacity-50 brightness-100;
    * {
      @apply pointer-events-none;
    }
  }
}

.loading-container{
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  display: flex;
  justify-content: end;
  align-items: center;
  padding-right: .5rem;

  will-change: opacity;
  transition:  opacity .2s ease-in-out;
  overflow: hidden;

  ion-spinner{
    will-change: auto;
    transition:  transform .2s ease-in-out;
    transform: translateY(-100%);
  }
  opacity: 0;
  z-index: 10;
  
  &.loading{
    ion-spinner{
      transform: translateY(0);
    }
    opacity: 1;
  }
}

ion-modal{
  &::part(content){
    @apply rounded-xl;
    border: 1px solid var(--ion-color-step-250);
  }
}