.input-container{
  cursor: pointer !important;
}
.input-select-label{
  @apply min-h-6 pointer-events-none w-full outline-none;
  color: var(--ion-color-dark);
}


.select-content{
  @apply p-1 w-full h-72 flex flex-col gap-1 overflow-hidden;
  .select-search-bar-container{
     @apply flex w-full shrink;

    .select-search-bar-icon-container{
      @apply h-full w-7 flex rounded-l-md items-center justify-center border;
    }
    .select-search-bar{
      @apply shrink border px-2 outline-none text-sm rounded-md bg-transparent w-full text-[--ion-color-dark] landscape:h-7 portrait:h-10;
    }
  }
}
.select-item-list{
  width: 100%;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  @apply gap-1;
  .select-item{
    &.disabled{
      @apply opacity-50;
      pointer-events: none;
    }
    color: var(--ion-color-dark);
    // transition: background-color 0.05s ease-in-out;
    @apply rounded-md landscape:min-h-8 portrait:min-h-10 w-full shrink-0 flex items-center justify-start pr-2;
    cursor: pointer;
    &:hover, &:focus, &[aria-selected="true"] {
      background-color: color-mix(in srgb, var(--ion-color-dark) 20%, transparent);
    }
    .select-item-checkmark-conteiner{
      @apply h-full w-7 flex items-center shrink-0 justify-center;
    }
    .select-item-label{
      @apply w-full;
    }
  }
}

.error-container{
  @apply absolute bottom-0 left-0 size-full opacity-0 -translate-y-12 flex items-center pointer-events-none justify-center z-[200];
  will-change: opacity, auto;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  &.active{
    @apply opacity-100 translate-y-0 pointer-events-auto #{!important};
  }
}