perf/modules/picker-field-sk/picker-field-sk.scss

@import '../themes/themes.scss';

// Style reference for vaadin elements:
// https://vaadin.com/docs/latest/components/combo-box/styling

.body-sk picker-field-sk,
picker-field-sk {
  vaadin-combo-box {
    --vaadin-field-default-width: 150px;
    --vaadin-combo-box-overlay-width: 250px;
    --vaadin-combo-box-overlay-max-height: 200px;
    --lumo-text-field-size: var(--lumo-size-xs);
  }
  input {
    border: none;
  }
}

.darkmode picker-field-sk {
  vaadin-combo-box::part(label) {
    transition: color 0.3s ease;
    color: var(--on-disabled);
  }
  vaadin-combo-box:hover::part(label) {
    transition: color 0.3s ease;
    color: var(--on-surface);
  }
  vaadin-combo-box:focus-within::part(label) {
    transition: color 0.3s ease;
    color: var(--primary);
  }
  vaadin-combo-box::part(input-field) {
    transition: background-color 0.3s ease;
    background-color: var(--on-disabled);
  }
  vaadin-combo-box:hover::part(input-field) {
    transition: background-color 0.3s ease;
    background-color: var(--on-surface);
  }
  vaadin-combo-box:focus-within::part(input-field) {
    transition: background-color 0.3s ease;
    background-color: var(--on-surface);
  }
}