homepage/styles/components/_form-elements.scss

@use '../lib/colors';
@use '../lib/layout';
@use '../lib/typography';

%form-item {
  @extend %narrow-content-gutter;
  display: flex;
  align-items: center;
}

%form-label {
  font-weight: typography.$emphasized-weight;
  color: colors.$blue-800;
}

%base-form-input {
  background-color: transparent;
  border: #{2px / 16px * 1rem} solid colors.$blue-800;
}

%form-input {
  @extend %base-form-input;
  padding: layout.$small-gap;
  font: inherit;

  &:hover {
    background-color: colors.$gray-300;
  }

  &:focus-visible,
  &:active {
    outline: none;
    background-color: colors.$yellow-600;
  }
}

.form-input {
  @extend %form-item;

  > span {
    @extend %form-label;
    flex-grow: 1;
    text-align: right;
  }

  > input,
  > textarea {
    @extend %form-input;
    flex-basis: 60%;
    margin-left: layout.$normal-gap;
  }
}

.form-checkbox {
  $size: 2rem;
  $gap: layout.$small-gap;

  @extend %form-item;
  justify-content: flex-end;

  &:hover > div {
    background-color: colors.$gray-300;
  }

  > input {
    opacity: 0;

    &:checked + div::before {
      content: '\2713';
      font-size: 1.8rem;
      line-height: $size;
    }

    &:focus-visible + div {
      background-color: colors.$yellow-600;
    }
  }

  > div {
    @extend %base-form-input;
    width: $size;
    height: $size;
    text-align: center;
  }

  > span {
    @extend %form-label;
    flex-basis: calc(60% - #{$size + $gap});
    margin-left: $gap;
  }
}

.form-submit {
  @extend %form-item;
  justify-content: flex-end;
  margin: layout.$huge-gap auto;

  > input {
    @extend %form-input;
    flex-basis: 60%;
  }
}