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

.form-choices {
  @extend %narrow-content;
  margin-top: layout.$huge-gap;
  margin-bottom: layout.$huge-gap;
  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;
      }
    }
  }
}