homepage/styles/components/_forms.scss

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

.form-choices {
  margin: layout.$huge-gap auto;
  max-width: 50rem;
  list-style: none;
  text-align: center;

  > li {
    position: relative;

    &:before {
      content: '\2771';
      display: inline-block;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }

    &:not(:last-child) {
      &:before {
        top: calc(50% - #{layout.$large-gap / 2});
      }

      &::after {
        content: '';
        display: block;
        margin: layout.$large-gap auto;
        width: 15rem;
        height: 1px;
        background-color: colors.$gray-300;
      }
    }

    > a {
      padding: layout.$small-gap layout.$normal-gap;
      display: inline-block;
      line-height: 2.5;
      text-decoration: none;

      &:hover {
        background-color: colors.$yellow-600;
        color: inherit;
        @include colors.card-shadow;
      }

      > em {
        padding-block: layout.$small-gap;
        font-style: inherit;
        background-color: colors.$yellow-600;
      }
    }
  }
}

%form-item {
  display: flex;
  align-items: center;
  margin: layout.$normal-gap auto;
  max-width: 50rem;
}

%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%;
  }
}