@use 'sass:math';

.twnd-select {
  @apply inline-block w-48 min-w-full outline-none;
}

.twnd-select-trigger {
  @apply justify-start align-middle rounded-md p-4 border-b-4 border-purple-500 bg-gray-50 dark:bg-gray-600 inline-table cursor-pointer relative box-border;

  .twnd-select-disabled & {
    @apply cursor-default;
  }
}

.twnd-select-value {
  @apply pb-0 table-cell max-w-0 w-full overflow-hidden text-ellipsis whitespace-nowrap text-gray-900 dark:text-gray-50 font-medium;
}

.twnd-select-arrow-wrapper {
  @apply table-cell align-middle;

  .twnd-form-field-appearance-fill & {
    @apply -translate-y-2/4;
  }

  .twnd-form-field-appearance-outline & {
    @apply -translate-y-1/4;
  }

  .twnd-form-field-appearance-standard.twnd-form-field-has-label
    .twnd-select:not(.twnd-select-empty) & {
      @apply -translate-y-2/4;
    }

  .twnd-form-field-appearance-standard .twnd-select.twnd-select-empty & {
    @apply transition-transform;
  }

  ._twnd-animation-noopable.twnd-form-field-appearance-standard .twnd-select.twnd-select-empty & {
    @apply transition-none;
  }
}

.twnd-select-arrow {
  @apply w-0 h-0 mr-4;
}

.twnd-select-panel-wrap {
  @apply basis-full;
}

.twnd-select-panel {
  @apply border-t-4 border-b-4 border-transparent backdrop-blur-2xl bg-opacity-50 dark:bg-opacity-50 mt-16 ml-4 max-h-48 overflow-y-auto min-w-full rounded-xl outline-0 bg-gray-100 dark:bg-gray-700;
}

.twnd-select-panel {
  .twnd-optgroup-label,
  .twnd-option {
    @apply font-body p-4 h-6 hover:bg-gray-300 dark:hover:bg-gray-800 overflow-hidden;
  }
}

.twnd-form-field-appearance-fill {
  .twnd-form-field-flex:not(.twnd-select.twnd-select-empty) {
    @apply border-r-4 border-purple-500 bg-gray-50 dark:bg-gray-600;
  }
}

.twnd-form-field-appearance-fill {
  &:not(.twnd-form-field-disabled) .twnd-form-field-flex {
    @apply cursor-pointer;
  }

  .twnd-form-field-label {
    @apply w-full;
  }
}

.twnd-select-placeholder {
  ._twnd-animation-noopable & {
    @apply transition-none;
  }

  .twnd-form-field-hide-placeholder & {
    @apply text-transparent text-opacity-0 transition-none block;
    -webkit-text-fill-color: transparent;
  }
}

.twnd-select-min-line:empty::before {
  content: ' ';
  @apply whitespace-pre w-1 inline-block opacity-0;
}