:host {
  @apply flex flex-col box-border text-regular;
}

:host:focus {
  @apply outline-none;
}

.backdrop {
  @apply border-none bg-transparent outline-none;
  display: none;
}

.display-backdrop {
  @apply fixed block z-modalBackdrop cursor-default;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}

.ui-input-wrapper {
  @apply flex flex-row bg-white;
}

.ui-select-value {
  @apply flex-grow text-cta-l;
  height: 21px;
  line-height: 21px;
}

.ui-select-toggle {
  @apply bg-transparent border-none outline-none text-black;
}

.ui-select-toggle ui-icon {
  transition: 250ms all ease-in-out;
  transform: rotate(90deg);
}

:host.toggled .ui-select-toggle ui-icon {
  transform: rotate(270deg);
}

.ui-select-dropdown-wrapper {
  @apply flex flex-col relative z-modal;
}

.ui-select-options {
  transition: 250ms all ease-in-out;
  @apply z-dropdown overflow-auto left-0 right-0;
  max-height: 0rem;
  top: 10px;
}

:host.toggled .ui-select-dropdown-wrapper .ui-select-options {
  max-height: 15rem;
}

.ui-select-dropdown-wrapper .ui-select-options {
  @apply flex flex-col absolute bg-white shadow-card rounded-card;
}

.hide {
  @apply hidden;
}

:host ::ng-deep ui-select-option button {
  @apply py-px-10 px-px-10 cursor-pointer w-full text-left text-regular bg-white border-0 outline-none font-bold;

  &:hover,
  &:focus {
    @apply bg-glitter;
  }
}
