@use 'globals';

$section-gap: 1.5rem;
$label-gap: 0.5rem;
$button-gap: 0.25rem;

.form-section {
  &__heading {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
  }

  &__label {
    display: block;
    font-weight: 600;
    margin-top: $section-gap;
  }

  &__input {
    display: block;
    margin-top: $label-gap;
    font-family: globals.$font-family-data;

    &--text {
      @include globals.rounded;
      border: globals.$default-border;
      padding: 0.5rem;
    }
  }
}

.form-buttons {
  display: flex;
  margin-top: $section-gap;
  justify-content: flex-end;

  &__button {
    margin: 0 $button-gap;

    &:first-child {
      margin-left: 0;
    }

    &:last-child {
      margin-right: 0;
    }

    &--cancel {
      @include globals.button-clear;
    }
    
    &--submit {
      @include globals.button-primary;
    }
  }
}