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

@include compatMixins.sky-default-overrides(
  '.sky-control-help-container:not(:empty)'
) {
  --sky-override-help-inline-margin-left: var(--sky-margin-inline-xs);
}

@include compatMixins.sky-default-overrides('.sky-control-label') {
  --sky-override-control-label-margin-bottom: #{$sky-margin-half};
}

@include compatMixins.sky-default-overrides('.sky-control-label-required') {
  --sky-override-required-color: var(--sky-highlight-color-danger);
  --sky-override-required-space: var(--sky-padding-half);
}

@include compatMixins.sky-default-overrides('.sky-form-control') {
  --sky-override-form-control-color: var(--sky-text-color-default);
}

.sky-form-control {
  width: 100%;
  padding: 6px 12px;
  @include mixins.sky-border(dark, top, bottom, left, right);
  line-height: $sky-line-height-base;
  font-size: $sky-font-size-base;
  color: var(--sky-override-form-control-color, var(--sky-color-text-default));

  &:not([type='range']):not([type='radio']):not([type='checkbox']):not(select) {
    /* Remove device-specific styles */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    -webkit-border-radius: 0;
  }

  &:focus {
    @include mixins.sky-field-status(active);
  }

  &:disabled {
    background-color: var(--sky-background-color-disabled);
    opacity: 1;
  }
}

.sky-form-group {
  margin-bottom: 0px;
}

input.ng-invalid.ng-touched,
select.ng-invalid.ng-touched,
textarea.ng-invalid.ng-touched {
  @include mixins.sky-field-status(invalid);
}

.sky-error-label {
  margin-top: $sky-margin-half;
  color: var(--sky-text-color-default);
}

.sky-error-label::before {
  content: '\f071';
  font-family: FontAwesome;
  margin-right: 5px;
  color: var(--sky-highlight-color-danger);
}

.sky-control-label {
  display: inline-block;
  font-weight: normal;
  margin-bottom: var(
    --sky-override-control-label-margin-bottom,
    var(--sky-space-gap-form-xs)
  );
  max-width: 100%;
}

.sky-control-label-required:after {
  /* TODO: remove this fallback `content` line, once support for content alt text is added to firefox & safari */
  content: '*';
  content: '*' / '';
  color: var(--sky-override-required-color, var(--sky-color-text-danger));
  padding-left: var(
    --sky-override-required-space,
    var(--sky-space-gap-label-s)
  );
}

.sky-control-help-container:not(:empty) {
  margin-left: var(
    --sky-override-help-inline-margin-left,
    var(--sky-space-gap-text_action-xs)
  );
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

select {
  appearance: none;
  background: #fff
    url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDEwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxMCI+Cgk8c3R5bGU+CgkJdHNwYW4geyB3aGl0ZS1zcGFjZTpwcmUgfQoJCS5zaHAwIHsgZmlsbDogIzQ0NDQ0NCB9IAoJPC9zdHlsZT4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0xLjQxIDQuNjdMMi40OCAzLjE4TDMuNTQgNC42N0wxLjQxIDQuNjdMMS40MSA0LjY3WiIgLz4KCTxwYXRoIGlkPSJMYXllciIgY2xhc3M9InNocDAiIGQ9Ik0zLjU0IDUuMzNMMi40OCA2LjgyTDEuNDEgNS4zM0wzLjU0IDUuMzNMMy41NCA1LjMzWiIgLz4KPC9zdmc+)
    no-repeat right 50%;
  background-size: 15px 30px;
  @include mixins.sky-border(light, top, bottom, left, right);
  border-radius: $sky-border-radius;
  font-size: $sky-font-size-base;
  height: 34px;
  padding: $sky-padding-half $sky-padding + 11 $sky-padding-half $sky-padding;
}

// Firefox-specific padding
@-moz-document url-prefix() {
  select {
    padding: $sky-padding-half $sky-padding + 7 $sky-padding-half $sky-padding -
      3;
  }
}

// Disable MS-specific arrows
select::-ms-expand {
  display: none;
}

// Edge-specific padding
@supports (-ms-ime-align: auto) {
  select {
    padding: $sky-padding-half $sky-padding + 8 $sky-padding-half $sky-padding -
      3;
  }
}

// Placeholder text
::placeholder {
  @include mixins.sky-deemphasized;
  opacity: 1;
}
