@import "govuk_publishing_components/individual_component_support";

.gem-c-feedback {
  background: govuk-colour("white");
  margin-top: govuk-spacing(6);

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

  // New design has the box flush with edges of smaller screens
  // We need to compensate for `govuk-width-container` margins:
  @include govuk-media-query($until: tablet) {
    margin-right: govuk-spacing(-3);
    margin-left: govuk-spacing(-3);
  }
  @include govuk-media-query($from: tablet, $until: desktop) {
    margin-right: govuk-spacing(-6);
    margin-left: govuk-spacing(-6);
  }
  // Scoped to the feedback component temporarily
  [hidden] {
    // stylelint-disable-next-line declaration-no-important
    display: none !important;
  }
}

.gem-c-feedback__prompt {
  background-color: govuk-colour("light-grey");
  color: govuk-colour("black");
  border-top: 1px solid $govuk-border-colour;
  outline: 0;
}

.gem-c-feedback__prompt-content {
  display: flex;
  flex-direction: column;
  padding: 0 govuk-spacing(3);
  @include govuk-media-query($from: tablet) {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.gem-c-feedback__prompt-questions {
  text-align: left;
  padding: govuk-spacing(4) 0;
  @include govuk-media-query($from: tablet) {
    margin: 0 govuk-spacing(3);
  }
}

.gem-c-feedback__prompt-questions--something-is-wrong {
  border-top: 1px solid $govuk-border-colour;
  @include govuk-media-query($from: tablet) {
    border: 0;
  }
}

.gem-c-feedback__prompt-question-answer {
  display: flex;
  align-items: center;
  @include govuk-media-query($until: mobile) {
    justify-content: center;
    flex-wrap: wrap;
  }
}

.gem-c-feedback__prompt-question,
.gem-c-feedback__prompt-success {
  @include govuk-font(19, $weight: bold);
  @include govuk-media-query($from: tablet) {
    @include govuk-font(16, $weight: bold);
  }
}

.gem-c-feedback__prompt-question {
  margin: 0;
  padding-bottom: govuk-spacing(2);

  &:focus {
    outline: 0;
  }
  @include govuk-media-query($from: mobile) {
    padding-bottom: 0;
    margin-right: govuk-spacing(2);
  }

  @include govuk-media-query($from: desktop) {
    margin-right: govuk-spacing(4);
  }
}

.gem-c-feedback__prompt-link {
  @include govuk-font(19);
  background: transparent;
  color: govuk-colour("black");
  box-shadow: 0 3px 0 govuk-colour("black");
  border: 1px govuk-colour("black") solid;
  margin-bottom: 0;
  width: 100%;

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

  &:focus,
  &:focus:not(:active):not(:hover) {
    background: govuk-colour("yellow");
    border-color: govuk-colour("black");
    box-shadow: 0 5px  0 govuk-colour("black");
  }

  &:active {
    color: govuk-colour("black");
  }

  &:hover {
    background: govuk-colour("mid-grey");
    color: govuk-colour("black");
  }
}

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

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

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

.gem-c-feedback__option-list-item {
  &:last-child {
    margin-left: govuk-spacing(2);

    @include govuk-media-query($from: desktop) {
      margin-left: govuk-spacing(4);
    }
  }
}

.gem-c-feedback__option-list-item .gem-c-feedback__prompt-link {
  min-width: 100px;
  @include govuk-media-query($until: desktop) {
    min-width: 80px;
  }
}

// Feedback form styles
.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: desktop) {
    border-width: $govuk-border-width;
  }

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

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

  a {
    @include govuk-link-common;
    @include govuk-link-style-default;
    @include govuk-link-print-friendly;
  }
}

.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 {
  padding: govuk-spacing(3);
  border-top: 1px solid $govuk-border-colour;

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

.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 {
  margin: 0 govuk-spacing(2);
  @include govuk-media-query($until: tablet) {
    margin: govuk-spacing(4) 0 0;
  }
}

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

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

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

// 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 .gem-c-input[type="text"] {
  @include govuk-font($size: 19);
  margin: 0;
  padding: govuk-spacing(1);
  border: $govuk-border-width-form-element solid $govuk-input-border-colour;

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