@use 'sass:color';

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

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

.label {
  order: 1;
  font-weight: bold;
  margin-bottom: var(--form-label-margin);

  &:has(input:invalid) {
    color: var(--form-invalid-color);
  }

  &:has(input:valid) {
    color: var(--form-valid-color);
  }
}

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

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

  .touched &:invalid {
    border-color: var(--form-invalid-color);

    ~ .label {
      color: var(--form-invalid-color);
    }

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

  .touched &:valid {
    border-color: var(--form-valid-color);

    ~ .label {
      color: var(--form-valid-color);
    }

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

.errorLabel {
  color: var(--form-invalid-color);
  margin-top: var(--form-label-margin);
}