// COPIED FROM https://github.com/alphagov/static/blob/master/app/assets/stylesheets/helpers/_report-a-problem.scss
@import "_buttons.scss";
@import "shared_scss/_conditionals2.scss";

.js-enabled .report-a-problem-container{
  display: none;
}

.report-a-problem-container,
.report-a-problem-toggle-wrapper {
  @extend %site-width-container;
  clear: both;

  // TODO: Refactor to avoid having to extend site-width-container
  //       The pattern should be flexible in its placement
  // #wrapper extends `site-width-container` too, which leads to
  // double margins on mobile viewports, reset margins when nested
  // within #wrapper
  #wrapper & {
    margin-left: 0;
    margin-right: 0;
  }

  // The homepage removes margins from wrapper
  // Be specific to override the above margin resets
  .homepage #wrapper & {
    @extend %site-width-container;
  }
}

.report-a-problem-container {
  .report-a-problem-inner {
    margin-bottom: 60px;
    .report-a-problem-content {
      max-width: 35em;
    }
  }

  h2 {
    @include core-24;
    font-weight: 600;
    margin: 1em 0;
  }

  .button-wrapper {
    padding-top: 0.5em;

    .button {
      @include button;
      @include core-19;
    }
  }

  p {
    @include core-19;
    padding-bottom: 1em;
  }

  label {
    @include core-19;
    padding: 0;
    margin: 0 0 0.22em 0;
    display: block;
    font-weight: bold;
  }

  input {
    &[type="text"] {
      display: block;
      @include core-19;
      margin: 0 0 1em 0;
      background-color: #f8f8f8;
      border: 1px inset #bfc1c3;
      padding: 0.3em 0 0.1em 0.4em;
      width: 95%;

      @include ie-lte(7) {
        width: 550px;
      }
    }
  }
}

.report-a-problem-toggle {
  @include core-16;
  margin-bottom: 30px;

  a {
    /* Use !important to override highly specific link styles
       that appear in apps. eg `#whitehall-wrapper a`
       Guarantees correct appearance. */
    color: $secondary-text-colour !important;
    text-decoration: underline !important;

    &:focus {
      color: $text-colour !important;
    }
  }

  @include ie-lte(7) {
    zoom: 1;
  }
}

.js-tab-content .report-a-problem-toggle {
  @include media-down(mobile) {
    margin-top:2em;
  }
}