.c-select-trigger {
  @apply inline-flex cursor-pointer items-center justify-center gap-4 whitespace-nowrap rounded border-0 bg-elevate px-4 text-sm font-medium text-gray shadow;

  &:disabled {
    @apply cursor-default opacity-50;
  }

  &-xs {
    @apply h-6;
  }

  &-sm {
    @apply h-9 text-sm;
  }

  &-md {
    @apply h-11 text-base;
  }

  &-lg {
    @apply h-14 text-lg;
  }
}

.c-select-value {
  @apply text-gray-500-400;
  font-style: italic;
}

.c-select-content {
  @apply overflow-hidden rounded bg-elevate text-gray shadow;
}

.c-select-viewport {
  @apply py-2;
}

.c-select-item {
  @apply flex cursor-pointer items-center whitespace-nowrap px-6 py-2 font-medium text-gray;

  &:hover,
  &:focus {
    @apply bg-gray-50-900 outline-none;
  }
}

/*This is a workaround to handle z-index on dialog component that is also rendered in portal on the same level*/
/*Styles added to .c-dialog are added to parent div as inline styles, therefore ~ div > .c-select-content*/
.c-dialog ~ div > .c-select-content {
  z-index: calc(var(--dialog-z-index) + 1);
}
