@use '../base' as *;

// --------------------------------

// (START) Global editor code https://codyhouse.co/ds/globals/forms

// --------------------------------

:root {
  --form-control-font-size: 1rem;
  --form-control-padding-x: var(--space-xs);
  --form-control-padding-y: var(--space-xxs);
  --form-control-radius: 3px;
}

.form-control {
  background: var(--color-bg-dark);
  cursor: auto;
  font-family: var(--font-primary);
  font-weight: 400;
  line-height: 1;
  @include fontSmooth;
  outline: 1px solid var(--color-contrast-high);

  &::placeholder {
    opacity: 1;  
    color: var(--color-contrast-low);
  }

  &:focus, &:focus-within {
    background: var(--color-bg);
    box-shadow: inset 0px 0px 0px 1px alpha(var(--color-contrast-lower), 0), 0px 0px 0px 2px var(--color-primary), 0px 1px 3px alpha(var(--color-black), 0.2);
    outline: none;
  }
}

.form-control--disabled, .form-control[disabled], .form-control[readonly] {
  opacity: 0.3;
  cursor: not-allowed;
}

.form-control[aria-invalid="true"], .form-control.form-control--error {
  outline: 1px solid var(--color-error-dark);

  &:focus, &:focus-within {
    box-shadow: inset 0px 0px 0px 1px alpha(var(--color-contrast-lower), 0), 0px 0px 0px 2px var(--color-error), 0px 1px 3px var(--color-error);
  }
}

.form-legend {}

.form-label {}

// --------------------------------

// (END) Global editor code

// --------------------------------