@import "shared/share-petition";
@import "shared/petition-item";

// Hide GTM iframe
// ===============
.gtm-no-script {
  display: none;
  visibility: hidden;
}

// Common page title
// =================
.page-title {
  position: relative;
  margin: em(25, 24) 0;
  @include media(tablet) {
    margin: em(35, 36) 0;
  }

  .icon {
    background-position: left center;
    position: absolute;
    left: 0;
    top: 0;
    height: 25px;

    @include media(tablet) {
      top: em(10, 36);
    }

  }
}
.page-title-with-icon {
  padding-left: ($text-indent)-3px;
}
.page-subtitle {
  @include bold-27();
  margin-bottom: em(35, 27);
}

// Back
// =================
$chevron-size: em(7, 16);
$chevron-border-min-width: 1px;
$chevron-border-width: em(1, 16);
$chevron-border-colour: $secondary-text-colour;

.back-page {
  @include core-16;

  display: inline-block;
  position: relative;

  margin-top: spacing(3);
  margin-bottom: spacing(3);

  padding: 0;
  padding-left: em(14, 16);

  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-thickness: max(1px, .05rem);
  text-underline-offset: 0.1578em;

  &:link,
  &:visited {
    color: $text-colour;
  }

  &:hover {
    text-decoration-thickness: max(3px, .15rem);
    text-decoration-skip-ink: none;
    text-decoration-skip: none;
  }

  &:before {
    content: "";
    display: block;

    position: absolute;
    top: 0;
    bottom: 0;
    left: em(3, 16);

    width: $chevron-size;
    height: $chevron-size;

    margin: auto 0;

    transform: rotate(225deg);

    $border-width-eval: "max(#{$chevron-border-min-width}, #{$chevron-border-width})";

    border: solid;
    border-width: $chevron-border-min-width $chevron-border-min-width 0 0;
    border-color: $chevron-border-colour;
    border-width: unquote($border-width-eval) unquote($border-width-eval) 0 0;
    font-size: unquote("max(16px, 1em)");
  }

  &:focus {
    @include focused-text;

    &:before {
      border-color: $focus-text-colour;
    }
  }

  &:after {
    content: "";
    position: absolute;
    top: -14px;
    right: 0;
    bottom: -14px;
    left: 0;
  }

  & + .page-title {
    margin-top: spacing(3);
  }
}



// .back-page {
//   @include core-16();
//   margin-top: em(20, 16);
//   color: $secondary-text-colour;
// }
// a.back-page {
//   display: block;
//   width: fit-content;
// }
// input.back-page, button.back-page {
//   border-width: 0px;
//   background-color: $white;
//   padding: 0;
//   cursor: pointer;
//   text-decoration: underline;
//   text-decoration-thickness: max(1px, .05rem);
//   text-underline-offset: 0.1578em;
// }
// .back-page:visited {
//   color: $secondary-text-colour;
// }
// .back-page:hover {
//   color: $text-colour;
// }

// Section panel
// =================
.section-panel {
  @extend %mobile-outdent-and-pad;
  margin-top: $gutter-half;
  padding-bottom: $gutter-half*2;
  margin-bottom: $gutter-half;
  border-bottom: 1px solid $panel-colour;
}
.section-panel-borderless {
  @extend .section-panel;
  border-bottom: none;
  padding-bottom: 0;
}

// Notifications
// =============
.notification {
  background-color: $link-colour;
  color: $white;
  padding: $gutter-half $gutter-half 1px (25px + $gutter-half * 2);
  position: relative;
  margin-bottom: $gutter;
  @extend %animated;
  @extend %bounce;

  .icon {
    position: absolute;
    top: $gutter-half;
    left: $gutter-half;
  }

  h2, h3, .header {
    margin-top: 0px;
    @include bold-24();
  }

  p {
    margin-top: 0px;
    @include core-19();
  }

  p.content {
    @include bold-19();
  }

  p.link {
    @include core-16();
  }

  a {
    color: $white;
  }

  details {
    color: $white;
  }

  summary {
    color: $white;

    &:hover {
      color: $white;
    }
  }

  .list-of-parliaments {
    margin-top: $gutter-half;
    display: block;
    @include core-16();

    summary {
      .summary {
        color: $white;
      }

      &:before {
        color: $white;
      }

      &:focus {
        .summary {
          color: $text-colour;
        }

        &:before {
          color: $text-colour;
        }
      }
    }

    ul {
      padding: $gutter/6 0;
    }

    li {
      padding: $gutter/6 0;
      padding-left: $gutter-two-thirds + 3px;
    }
  }
}

.notification-grey {
  background-color: $grey-1;
}

.notification-orange {
  background-color: $orange;
}

.notification-red {
  background-color: $red;
}

.notification-black {
  background-color: $black;
}

// Flash messages
// =========
.flash-notice {
  color: $white;
  background: $grey-1;
  margin: $gutter-half 0;
  text-align: center;
  @include bold-24();
  padding: em(15, 18) em(30, 18);
  @include media(tablet) {
    padding: em(15, 24) em(30, 24);
  }
  span {
    @include bold-19();
    display: block;
    margin: em(5) 0;
  }
  a {
    color: $white;
  }
}

.flash-notice-description {
  @include bold-16();
}

// Pagination
// ==========
.search-pagination {
  @include bold-27();

  margin-top: $gutter;
  padding-bottom: $gutter-half;

  display: flex;
  justify-content: flex-end;

  .previous, .next {
    position: relative;
    width: 20%;
    height: 60px;

    &:focus {
      outline: none;
    }

    .paginate-label {
      display: inline-block;
      margin-top: 5px;
    }

    .paginate {
      display: block;
      font-size: 14px;
      line-height: 20px;
      font-weight: 500;
    }

    &::before, &::after {
      content: "";
      position: absolute;
      height: 0;
      width: 42px;
      border-top: 6px solid $link-colour;
    }

    &::before {
      top: 30px;
    }

    &::after {
      top: 24px;
    }

    &:hover {
      &::before, &::after {
        border-top: 6px solid $link-hover-colour;
      }
    }

    &:focus {
      &::before, &::after {
        border-top: 6px solid $text-colour;
      }
    }
  }

  .previous {
    margin-right: auto;
    padding-left: 52px;

    &::before, &::after {
      left: 0;
    }

    &::before {
      transform-origin: top left;
      transform: rotate(-45deg);
    }

    &::after {
      transform-origin: bottom left;
      transform: rotate(45deg);
    }
  }

  .next {
    margin-left: auto;
    padding-right: 52px;
    text-align: right;

    &::before, &::after {
      right: 0;
    }

    &::before {
      transform-origin: top right;
      transform: rotate(45deg);
    }

    &::after {
      transform-origin: bottom right;
      transform: rotate(-45deg);
    }
  }
}

// About petitions
// ==========
.about-petitions {
  margin: $gutter 0;
}

.about-item {
  padding: $gutter-two-thirds 0 0 0;

  p {
    margin: em(5, 16) 0;

    @include media(tablet) {
      margin: em(10, 19) 0;
    }
  }

  h2 {
    font-size: 24px;
    line-height: 30/24;
    margin: 0 0 em(10, 24) 0;
    padding: em(5, 24) 0 0 $text-indent - 5px;

    @include media(tablet) {
      margin: 0 0 em(10, 24) 0;
      padding: em(5, 24) 0 0 $text-indent - 5px;
    }
  }
  h3 {
    margin-top: em(10, 16);

    @include media(tablet) {
      margin: em(5, 19) 0;
    }
  }
}
.about-item-count-response h2, .about-item-count-debate h2, .about-item-other-business h2 {
  background-repeat: no-repeat;
}
.about-item-count-response h2 {
  background-position: 0 6px;
  @include background-image("graphics/graphic_crown", 27px, 25px);
}
.about-item-count-debate h2, .about-item-other-business h2 {
  background-position: 1px 0;
  @include background-image("graphics/graphic_portcullis", 26px, 32px);
}
.about-item-scheduled-debate-date {
  @include bold-19;
}

// Pull-quote
.pull-quote {
  quotes: "“" "”";
}
@include media(tablet) {
  .pull-quote:before {
    content: open-quote;
    font-size: 48px;
    line-height: 50/48;
    float: left;
    margin-left: $gutter * -1;
    margin-top: $gutter-one-third * -1;
  }
}

.pull-quote p {
  @include core-24;
  margin-top: em(5, 18);
  margin-bottom: em(15, 18);

  @include media(tablet) {
    margin-top: em(5, 24);
    margin-bottom: em(15, 24);
  }
}

// Video panel thing

.debate-video {
  background-color: $text-colour;
  display: block;
  position: relative;
  width: 100%;
  @include inline-block;

  img {
    background-color: $text-colour;
    width: 100%;
    height: 100%;
    vertical-align: bottom;
  }

  &:before {
    @extend .icon;
    @extend .icon-play-white;

    background-color: $petitions-brand;
    background-position: 50% 50%;
    content: "";
    width: $gutter * 2.5;
    height: $gutter * 2;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;

    @include media(tablet) {
      width: $gutter * 3;
      height: $gutter * 2;
    }
  }

  &:hover {
    img {
      opacity: 0.9;
    }

    &::before {
      background-color: darken($petitions-panel-colour, 5%);
    }
  }

  &:focus {
    box-shadow: none !important;
    outline: $focus-width solid $focus-colour;
    outline-offset: 0;

    &:before {
      @extend .icon-play;

      background-color: $focus-colour;
      width: $gutter * 2.5;
      height: $gutter * 2;

      @include media(tablet) {
        width: $gutter * 3;
        height: $gutter * 2;
      }
    }
  }
}

.debate-outcome-links {
  margin: em(10, 19) 0;

  li {
    margin: em(5, 16) 0;
    white-space: nowrap;

    @include media(tablet) {
      display: inline;
    }
  }

  li:before {
    @include media(tablet) {
      content: "• ";
    }
  }

  li:first-child:before {
    @include media(tablet) {
      content: "";
    }
  }
}
