$feedback-form-spacing: 50px;
$feedback-form-spacing-mobile: 20px;
$feedback-form-bp-min: "min-width: 751px";

@use "00-base/configure" as *;

.ma__feedback-form {
  background-size: cover;
  background-position: top center;

  &__container {

    @include ma-container;
    max-width: ($column + $gutter) * 8 - $gutter;
    padding-top: 60px;
    padding-bottom: 60px;
  }

  &__header {
    margin-bottom: $feedback-form-spacing-mobile;

    @media ($bp-small-min) {
      margin-bottom: $feedback-form-spacing;
    }
  }

  &__title {

    @include ma-border-decorative;
    margin-bottom: $feedback-form-spacing-mobile;
    padding-bottom: 16px;

    @media ($bp-small-min) {
      margin-bottom: $feedback-form-spacing;
    }

    @media ($bp-medium-min) {
      text-align: center;

      &:after {
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }

  &__description {
    margin: 0;

    @media ($bp-medium-min) {
      text-align: center;
    }
  }

  &__name,
  &__email {
    margin-bottom: $feedback-form-spacing-mobile;

    @media ($bp-small-min) {
      margin-bottom: $feedback-form-spacing;
    }

    @media ($feedback-form-bp-min) {

      @include span-columns(4 of 8);
    }

    input {
      width: 100%;
    }
  }

  &__name {

    @media ($feedback-form-bp-min) {
      margin-bottom: 0;
    }

  }

  &__email {
    margin-right: 0;
  }

  &__feedback {
    clear: both;
    padding: 0 0 $feedback-form-spacing-mobile 0;

    @media ($bp-small-min) {
      margin-bottom: $feedback-form-spacing;
    }

    textarea {
      width: 100%;
    }
  }

  &__type {
    margin-bottom: $feedback-form-spacing-mobile;

    @media ($bp-small-min) {
      margin-bottom: $feedback-form-spacing;
    }

    @media ($feedback-form-bp-min) {

      @include span-columns(4 of 8);
    }

    .ma__select-box {
      width: 100%;
    }
  }

  &__permission {
    border: none;
    clear: both;
    margin-bottom: $feedback-form-spacing-mobile;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;


    @media ($bp-small-min) {
      margin-bottom: $feedback-form-spacing;
    }


    legend {
      font-size: $fonts-small;
      line-height: 1.75;
    }

    .ma__input-radio + .ma__input-radio {
      margin-left: 1.5em;
    }
  }

  &__controls {
    text-align: right;

    button,
    input[type="submit"],
    input[type="button"] {

      @include ma-button;
    }
  }

  &__error-message {
    display: inline-block;
    margin-right: 20px;
    opacity: 1;
    vertical-align: middle;
    transition: opacity 1.5s;

    &[hidden] {
      opacity: 0;
      transition: opacity 0s;
    }
  }
}

//theme

.ma__feedback-form {

  &__overlay {
    background-color: rgba(#000,.6);
    color: $c-font-inverse;
  }

  &__title {

    @include ma-border-decorative($c-highlight,1);
    color: $c-font-inverse;
  }

  &__controls {

    button,
    input[type="button"],
    input[type="submit"] {

      @include ma-button("normal","solid",$c-primary);
    }
  }

  &__error-message {
    color: $c-font-error;
  }
}