metabuilder/fakemui/styles/components/FormControl.module.scss

// FormControl component styles

.form-control {
  display: inline-flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  vertical-align: top;

  &--full-width {
    display: flex;
    width: 100%;
  }

  // Margin variants
  &--margin-none {
    margin: 0;
  }

  &--margin-dense {
    margin-top: 8px;
    margin-bottom: 4px;
  }

  &--margin-normal {
    margin-top: 16px;
    margin-bottom: 8px;
  }

  // Size variants
  &--small {
    .form-control__label {
      font-size: 0.875rem;
    }
  }

  &--medium {
    .form-control__label {
      font-size: 1rem;
    }
  }

  // States
  &--disabled {
    opacity: 0.6;
    pointer-events: none;
  }

  &--error {
    .form-control__label,
    .form-control__helper-text {
      color: var(--color-error, #d32f2f);
    }

    input,
    textarea,
    select {
      border-color: var(--color-error, #d32f2f);

      &:focus {
        border-color: var(--color-error, #d32f2f);
        box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.2);
      }
    }
  }

  &--focused {
    .form-control__label {
      color: var(--color-primary, #1976d2);
    }
  }

  &--required {
    .form-control__label::after {
      content: " *";
      color: var(--color-error, #d32f2f);
    }
  }

  // Variant styles
  &--outlined {
    input,
    textarea,
    select {
      border: 1px solid var(--color-divider, rgba(0, 0, 0, 0.23));
      border-radius: var(--border-radius, 4px);
      padding: 16.5px 14px;
    }
  }

  &--filled {
    input,
    textarea,
    select {
      background-color: var(--color-fill-light, rgba(0, 0, 0, 0.06));
      border: none;
      border-bottom: 1px solid var(--color-divider, rgba(0, 0, 0, 0.42));
      border-radius: var(--border-radius, 4px) var(--border-radius, 4px) 0 0;
      padding: 25px 12px 8px;

      &:focus {
        background-color: var(--color-fill-dark, rgba(0, 0, 0, 0.09));
      }
    }
  }

  &--standard {
    input,
    textarea,
    select {
      border: none;
      border-bottom: 1px solid var(--color-divider, rgba(0, 0, 0, 0.42));
      border-radius: 0;
      padding: 4px 0 5px;
    }
  }
}