@use "sass:map";
@use '../settings/index' as *;

.form-group {
  margin-bottom: .75rem;
  @media screen and (min-width: map.get($breakpoints, lg)) {
    margin-bottom: 1rem;
  }

  &--gap-sm {
    gap: .5rem;
  }

  &--space-md {
    gap: 1rem;
  }
}

.input-group {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: $gutter;

  &--vertical {
    flex-direction: column;
  }
}

.form-label {
  color: var(--text-primary);
  display: inline-block;
  margin-bottom: .35rem;
  font-size: .95rem;
  cursor: pointer;
  line-height: 1.4;

  &.disabled {
    color: var(--text-disabled);
    cursor: not-allowed;
  }

  &.required::after {
    content: " *";
    color: var(--error);
    font-weight: 600;
  }
}

.input-text {
  color: var(--text-primary);
  display: inline-block;
  font-size: .95rem;
  cursor: pointer;
}

.check-control-label {
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 1rem;
  user-select: none;

  &:has(input:disabled) {
    color: var(--text-disabled);
    cursor: not-allowed;
  }
}

.form-help {
  color: var(--text-disabled);
  font-size: .875rem;
  margin-top: .25rem;
}