@use 'sass:color';
@use '../styles/variables' as v;

.base {
  display: flex;
  flex-direction: column;

  &:not(:last-child):not(.noMargin) {
    margin-bottom: v.$gutter;
  }
}

.label {
  order: 1;
  font-weight: bold;
  margin-bottom: v.$form-label-margin;

  &:has(input:invalid) {
    color: v.$form-invalid-color;
  }

  &:has(input:valid) {
    color: v.$form-valid-color;
  }
}

.element {
  order: 2;
  width: 100%;
  box-shadow: none;
  border: 1px solid v.$form-border-color;
  padding: v.$form-element-padding;
  font-family: v.$body-font-family;
  background: white;

  &:focus {
    outline: none;
    border-color: v.$color-blue;
    box-shadow: 0 0 5px 0px color.scale(v.$color-blue, $alpha: -20%);
  }

  .touched &:invalid {
    border-color: v.$form-invalid-color;

    ~ .label {
      color: v.$form-invalid-color;
    }

    &:focus {
      box-shadow: 0 0 5px 0px color.scale(v.$form-invalid-color, $alpha: -20%);
    }
  }

  .touched &:valid {
    border-color: v.$form-valid-color;

    ~ .label {
      color: v.$form-valid-color;
    }

    &:focus {
      box-shadow: 0 0 5px 0px color.scale(v.$form-valid-color, $alpha: -20%);
    }
  }
}

.errorLabel {
  color: v.$form-invalid-color;
  margin-top: v.$form-label-margin;
}