@use '../../variables' as *;
@use '../../compat-tokens-mixins' as compatMixins;

@include compatMixins.sky-modern-overrides('select', false) {
  --sky-override-select-icon-size: var(--modern-size-15) var(--modern-size-30);
}

@include compatMixins.sky-modern-overrides('.sky-error-label', false) {
  --sky-override-error-label-margin-top: var(--modern-size-5);
}

.sky-theme-modern {
  .sky-error-label {
    margin-top: var(
      --sky-override-error-label-margin-top,
      var(--sky-space-inset-input_label-top-m)
    );
    color: var(--sky-text-color-default);
  }

  .sky-error-label::before {
    content: '\f071';
    font-family: FontAwesome;
    margin-right: var(--sky-space-gap-icon-s);
    color: var(--sky-color-icon-danger);
  }

  // Placeholder text
  ::placeholder {
    color: var(--sky-color-text-deemphasized);
    font-style: var(--sky-font-style-deemphasized-style);
    opacity: 1;
  }

  select {
    background: var(--sky-color-background-input-base)
      url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDEwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxMCI+Cgk8c3R5bGU+CgkJdHNwYW4geyB3aGl0ZS1zcGFjZTpwcmUgfQoJCS5zaHAwIHsgZmlsbDogIzQ0NDQ0NCB9IAoJPC9zdHlsZT4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0xLjQxIDQuNjdMMi40OCAzLjE4TDMuNTQgNC42N0wxLjQxIDQuNjdMMS40MSA0LjY3WiIgLz4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0zLjU0IDUuMzNMMi40OCA2LjgyTDEuNDEgNS4zM0wzLjU0IDUuMzNMMy41NCA1LjMzWiIgLz4KPC9zdmc+)
      no-repeat right 50%;
    background-size: var(
      --sky-override-select-icon-size,
      var(--sky-size-icon-s) var(--sky-size-icon-xl)
    );
  }
}
