Style/assets/scss/forms/form-field.scss

@import "../variables/colors";

.form-field {
  &.disabled {
    pointer-events: none;
    opacity: 0.5;
  }
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  &.required label:after {
    content: '*';
    color: map-get($colors-dark, 'red-60');
    margin-left: 3px;
  }
  &.error .form-error {
    display: block;
  }
  label {
    display: block;
    margin-bottom: 5px;
    margin-left: 2px;
    font-size: 0.9em;
  }
  .form-hint {
    font-size: 0.8em;
    margin-top: 2px;
    color: map-get($colors-dark, 'gray-60');
    margin-left: 2px;
  }
  .form-error {
    font-size: 0.8em;
    margin-top: 2px;
    color: map-get($colors-dark, 'red-60');
    margin-left: 2px;
    display: none;
  }
  .input-group {
    position: relative;
    padding: 0;
    display: flex;
    border: solid 1px map-get($colors-light, 'gray-40');
    border-radius: 3px;
    transition: border 0.3s linear, box-shadow 0.3s, background-color 0.3s linear;
    overflow: hidden;
    &:hover:has(.form-input:not(:disabled)) {
      border-color: map-get($colors-light, 'blue-0');
    }
    &:has(.form-input:focus) {
      border-color: map-get($colors-light, 'blue-0');
      box-shadow: 0 0 2px 2px map-get($colors-light, 'blue-50');
    }
    &:has([type=radio]),
    &:has([type=checkbox]) {
      border: 0;
      label {
        font-size: 1em;
      }
    }
    &:has(.form-input:disabled) .form-button {
      opacity: 0.5;
      pointer-events: none;
    }
    .form-input {
      flex: 1;
      border: 0;
      padding: 4px 8px;
      outline-width: 0;
      box-shadow: none;
      border-radius: 3px;
      display: block;
      width: 100%;
      background-color: map-get($colors-light, 'white-0');
      transition: border 0.1s linear, outline-width 0.1s linear;
      caret-color: map-get($colors-dark, 'blue-50');
      &::placeholder {
        color: map-get($colors-light, 'gray-0');
      }
      &[type="time"],
      &[type="datetime-local"],
      &[type="date"] {
        &::-webkit-calendar-picker-indicator {
          cursor: pointer;
          border-radius: 4px;
          margin-right: 2px;
          opacity: 0.8;
          filter: invert(0.8);
        }
        &::-webkit-calendar-picker-indicator:hover {
          opacity: 1
        }
      }
    }
    .form-text {
      padding: 3px 6px;
      border: 0;
    }
    .form-file {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      cursor: pointer;
      opacity: 0;
      &:focus {
        outline: none;
      }
    }
    &:has(.form-file) .form-button {
      width: 100%;
    }
  }
  &.error {
    border-color: map-get($colors-light, 'red-0');
    .input-group {
      border-color: map-get($colors-light, 'red-0');
      .form-input {
        caret-color: map-get($colors-dark, 'red-50');
      }
      &:has(.form-input:focus) {
        border-color: map-get($colors-light, 'red-0');
        box-shadow: 0 0 2px 2px map-get($colors-light, 'red-50');
      }
    }
  }
}

.dark .form-field {
  .input-group {
    background-color: map-get($colors-dark, 'gray-20');
    border: solid 1px map-get($colors-dark, 'gray-20');
    &:has(.form-radio),
    &:has(.form-checkbox) {
      border: solid 1px map-get($colors-dark, 'gray-10');
      background-color: transparent;
    }
    .form-input:not(select) {
      color: map-get($colors-light, 'gray-50');
      background-color: transparent;
    }
    .form-input:is(select){
      color: map-get($colors-light, 'gray-50');
      background-color: map-get($colors-dark, 'gray-20');
    }
    .form-radio,
    .form-checkbox {
      border: solid 1px map-get($colors-dark, 'gray-60');
    }
    &:hover:has(.form-input:not(:disabled)) {
      border-color: map-get($colors-light, 'blue-0');
    }
    &:has(.form-input:focus) {
      $bg-color: mix(map-get($colors-dark, 'gray-0'),  map-get($colors-dark, 'blue-10'), 85%);
      background-color: $bg-color;
      box-shadow: 0 0 2px 2px $bg-color;
    }
  }
  &.error {
    $bg-color: mix(map-get($colors-dark, 'gray-0'),  map-get($colors-dark, 'red-10'), 85%);
    .form-error {
      color: map-get($colors-light, 'red-10');
    }
    .input-group {
      border-color: map-get($colors-light, 'red-0');
      &:has(.form-input:focus) {
        background-color: $bg-color;
        box-shadow: 0 0 2px 2px $bg-color;
      }
      &:has(.form-radio),
      &:has(.form-checkbox) {
        background-color: transparent;
        border-color: transparent;
      }
    }
  }
}