.gem-c-feedback {
  background: govuk-colour("white");
  margin: 0 auto;
  max-width: $govuk-page-width;
  position: relative;

  .visually-hidden {
    @include govuk-visually-hidden;
  }
}

.gem-c-feedback--top-margin {
  margin-top: govuk-spacing(6);

  @include govuk-media-query($from: tablet) {
    margin-top: govuk-spacing(9);
  }
}

// hide without js
// show with js, unless also has the js-hidden class
.gem-c-feedback__js-show,
.gem-c-feedback__form,
.gem-c-feedback__prompt-success,
.gem-c-feedback__js-prompt-questions,
.gem-c-feedback__error-summary {
  display: none;

  .js-enabled & {
    display: block;

    &.js-hidden {
      display: none;
    }
  }
}

.gem-c-feedback__prompt {
  @include govuk-clearfix;
  background-color: govuk-colour("blue");
  color: govuk-colour("white");
  padding: govuk-spacing(2) govuk-spacing(3) 0;
  outline: 0;
}

.gem-c-feedback__prompt-question,
.gem-c-feedback__prompt-success {
  @include govuk-font(19, $weight: bold);
  display: inline-block;

  // There's a global h3 rule in some layouts that interferes with this component
  margin: 0;

  &:focus {
    outline: 0;
  }

  @include govuk-media-query($from: tablet) {
    @include govuk-font(16, $weight: bold);
    float: left;
  }
}

.gem-c-feedback__prompt-link {
  @include govuk-link-common;
  @include govuk-font(19);

  @include govuk-media-query($from: tablet) {
    @include govuk-font(16);
    margin-left: govuk-spacing(2);
  }
}

.gem-c-feedback__prompt-link:link,
.gem-c-feedback__prompt-link:visited {
  color: govuk-colour("white");

  &:focus {
    color: $govuk-focus-text-colour;
  }
}

.gem-c-feedback__error-summary {
  margin-bottom: govuk-spacing(3);
  padding: govuk-spacing(3);
  border: solid $govuk-border-width-narrow $govuk-error-colour;
  clear: both;

  &:focus {
    outline: solid 3px $govuk-focus-colour;
  }

  @include govuk-media-query($from: tablet) {
    border-width: $govuk-border-width;
  }

  // this comes from the backend so we can't put a class on it
  h2,
  .gem-c-feedback__heading {
    @include govuk-text-colour;
    @include govuk-font(24, $weight: bold);
    margin: 0;
  }

  p {
    @include govuk-text-colour;
    @include govuk-font(19);
    margin: govuk-spacing(2) 0;
  }

  a {
    @extend %govuk-link;
  }
}

.gem-c-feedback__error-message {
  @include govuk-font(19, $weight: bold);
  display: block;
  padding: 4px 0 0;
  color: $govuk-error-colour;
}

.gem-c-feedback__form {
  margin: govuk-spacing(3) govuk-spacing(2) 0 govuk-spacing(2);
  padding: govuk-spacing(3) 0;
  border-top: govuk-spacing(2) solid govuk-colour("blue");

  @include govuk-media-query($from: tablet) {
    padding: govuk-spacing(6) 0;
  }
}

.gem-c-feedback__form-heading {
  @include govuk-text-colour;
  @include govuk-font(24, $weight: bold);
  margin: 0 0 govuk-spacing(3) 0;
}

.gem-c-feedback__form-paragraph {
  @include govuk-text-colour;
  @include govuk-font(19);
  margin: 0 0 govuk-spacing(6) 0;
}

.gem-c-feedback__form-label {
  @include govuk-font(16);
  display: block;
  padding-bottom: govuk-spacing(3);
}

.gem-c-feedback__close {
  @include govuk-link-common;
  @include govuk-link-style-default;
  @include govuk-font(19);
  float: right;
  margin: 0 govuk-spacing(1) govuk-spacing(2) 0;

  @include govuk-media-query($from: tablet) {
    padding-top: 0;
  }
}

.gem-c-feedback__email-link {
  display: block;
  margin-top: govuk-spacing(3);

  @include govuk-media-query($from: tablet) {
    display: inline-block;
    margin-top: 0;
    margin-left: govuk-spacing(3);
  }
}

// static.css on GOV.UK overwrites the component styles using input[type="text"]
// so we need to apply  govuk-input styles using a stronger selector
.gem-c-feedback input[type="text"] {
  // scss-lint:disable PlaceholderInExtend
  // sass-lint:disable placeholder-in-extend
  @extend .govuk-input;
  // sass-lint:enable placeholder-in-extend
  // scss-lint:enable PlaceholderInExtend
  margin: 0;
}

.gem-c-feedback__option-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}


.js-enabled {
  .gem-c-feedback__js-prompt-questions {
    @include govuk-media-query($until: tablet) {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 140));
      grid-template-rows: repeat(2, auto);
    }
  }

  .gem-c-feedback__prompt-question {
    @include govuk-media-query($until: tablet) {
      grid-area: 1 / 1;
    }
  }

  .gem-c-feedback__option-list {
    list-style-type: none;
    margin: 0;
    padding: 0;

    @include govuk-media-query($until: tablet) {
      grid-area: 1 / 1 / 2 / 3;
      display: grid;
      grid-template-columns: repeat(2, minmax(140px, 140px));
      grid-template-rows: repeat(2, auto);
      // older grid spec
      grid-row-gap: govuk-spacing(3);
      // newer grid spec
      row-gap: govuk-spacing(3); // sass-lint:disable-line no-misspelled-properties
    }
  }

  .gem-c-feedback__option-list-item {
    @include govuk-media-query($from: tablet) {
      float: left;
    }
  }

  .gem-c-feedback__option-list-item--useful {
    @include govuk-media-query($until: tablet) {
      display: inline-block;
      @supports (display: grid) {
        grid-area: 1 / 2;
        padding-left: govuk-spacing(3);
      }
    }
  }

  .gem-c-feedback__option-list-item--not-useful {
    @include govuk-media-query($until: tablet) {
      display: inline-block;
      @supports (display: grid) {
        grid-area: 1 / 2;
        padding-left: 50px;
      }
    }
  }

  .gem-c-feedback__option-list-item--wrong {
    @include govuk-media-query($until: tablet) {
      display: block;
      margin-top: govuk-spacing(3);
      @supports (display: grid) {
        margin-top: 0;
        grid-area: 2 / 1 / 2 / 3;
      }
    }

    @include govuk-media-query($from: tablet) {
      float: right;
    }
  }
}