// Petitions icons
// GOV.UK front end toolkit dependencies
@import "../govuk/device-pixels";

// Graphics
// .graphic .graphic-portcullis
// .graphic .graphic-portcullis-white
// .graphic .graphic-portcullis-large-white
// .graphic .graphic-portcullis-large-grey
// .graphic .graphic-crown
// .graphic .graphic-crown-white
// .graphic .graphic-crest-large-white
// .graphic .graphic-crest-large-grey
// .graphic .graphic-pen
// .graphic .graphic-open-government-licence

// Icons
// .icon .icon-share-facebook
// .icon .icon-share-email
// .icon .icon-share-twitter
// .icon .icon-share-x
// .icon .icon-share-whatsapp
// .icon .icon-email
// .icon .icon-warning-white
// .icon .icon-confirmation-tick
// .icon .icon-search-white
// .icon .icon-location-white
// .icon .icon-play-white
// .icon .icon-paginate-next
// .icon .icon-paginate-previous

.icon, .graphic {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  @include inline-block;
}

.graphic-portcullis {
  width: 26px;
  height: 32px;
  background-image: image-url("graphics/graphic_portcullis.png");

  @include device-pixel-ratio() {
    background-image: image-url("graphics/graphic_portcullis-2x.png");
    background-size: 26px 32px;
  }
}
.graphic-portcullis-white {
  width: 26px;
  height: 32px;
  background-image: image-url("graphics/graphic_portcullis-white.png");

  @include device-pixel-ratio() {
    background-image: image-url("graphics/graphic_portcullis-white-2x.png");
    background-size: 26px 32px;
  }
}
.graphic-portcullis-large-white {
  width: 52px;
  height: 64px;
  background-image: image-url("graphics/graphic_portcullis-large-white.png");

  @include device-pixel-ratio() {
    background-image: image-url("graphics/graphic_portcullis-large-white-2x.png");
    background-size: 52px 64px;
  }
}
.graphic-portcullis-large-grey {
  width: 52px;
  height: 64px;
  background-image: image-url("graphics/graphic_portcullis-large-grey.png");

  @include device-pixel-ratio() {
    background-image: image-url("graphics/graphic_portcullis-large-grey-2x.png");
    background-size: 52px 64px;
  }
}
.graphic-crown {
  width: 27px;
  height: 25px;
  background-image: image-url("graphics/graphic_crown.png");

  @include device-pixel-ratio() {
    background-image: image-url("graphics/graphic_crown-2x.png");
    background-size: 27px 25px;
  }
}
.graphic-crown-white {
  width: 27px;
  height: 25px;
  background-image: image-url("graphics/graphic_crown-white.png");

  @include device-pixel-ratio() {
    background-image: image-url("graphics/graphic_crown-white-2x.png");
    background-size: 27px 25px;
  }
}
.graphic-crest-large-white {
  width: 80px;
  height: 64px;
  background-image: image-url("graphics/graphic_crest-large-white.png");

  @include device-pixel-ratio() {
    background-image: image-url("graphics/graphic_crest-large-white-2x.png");
    background-size: 80px 64px;
  }
}
.graphic-crest-large-grey {
  width: 80px;
  height: 64px;
  background-image: image-url("graphics/graphic_crest-large-grey.png");

  @include device-pixel-ratio() {
    background-image: image-url("graphics/graphic_crest-large-grey-2x.png");
    background-size: 80px 64px;
  }
}
.graphic-pen {
  width: 25px;
  height: 35px;
  background-image: image-url("graphics/graphic_pen.png");

  @include device-pixel-ratio() {
    background-image: image-url("graphics/graphic_pen-2x.png");
    background-size: 25px 35px;
  }
}
.graphic-open-government-licence {
  width: 42px;
  height: 17px;
  background-image: image-url("graphics/graphic_open-government-licence.png");

  @include device-pixel-ratio() {
    background-image: image-url("graphics/graphic_open-government-licence-2x.png");
    background-size: 42px 17px;
  }
}
.icon-share-facebook {
  width: 7px;
  height: 16px;
  background-image: image-url("icons/icon_share-facebook.png");

  @include device-pixel-ratio() {
    background-image: image-url("icons/icon_share-facebook-2x.png");
    background-size: 7px 16px;
  }
}
.icon-share-email {
  width: 18px;
  height: 13px;
  background-image: image-url("icons/icon_share-email.png");

  @include device-pixel-ratio() {
    background-image: image-url("icons/icon_share-email-2x.png");
    background-size: 18px 13px;
  }
}
.icon-share-twitter {
  width: 16px;
  height: 13px;
  background-image: image-url("icons/icon_share-twitter.png");

  @include device-pixel-ratio() {
    background-image: image-url("icons/icon_share-twitter-2x.png");
    background-size: 16px 13px;
  }
}
.icon-share-x {
  width: 16px;
  height: 13px;
  background-image: image-url("icons/icon_share-x.png");

  @include device-pixel-ratio() {
    background-image: image-url("icons/icon_share-x-2x.png");
    background-size: 16px 13px;
  }
}
.icon-share-whatsapp {
  width: 19px;
  height: 19px;
  background-image: image-url("icons/icon_share-whatsapp.png");

  @include device-pixel-ratio() {
    background-image: image-url("icons/icon_share-whatsapp-2x.png");
    background-size: 19px 19px;
  }
}
.icon-email {
  width: 25px;
  height: 17px;
  background-image: image-url("icons/icon_email.png");

  @include device-pixel-ratio() {
    background-image: image-url("icons/icon_email-2x.png");
    background-size: 25px 17px;
  }
}
.icon-warning-white {
  width: 25px;
  height: 25px;
  background-image: image-url("icons/icon_warning-white.png");

  @include device-pixel-ratio() {
    background-image: image-url("icons/icon_warning-white-2x.png");
    background-size: 25px 25px;
  }
}
.icon-confirmation-tick {
  width: 22px;
  height: 17px;
  background-image: image-url("icons/icon_confirmation-tick.png");

  @include device-pixel-ratio() {
    background-image: image-url("icons/icon_confirmation-tick-2x.png");
    background-size: 22px 17px;
  }
}
.icon-search {
  width: 18px;
  height: 18px;
  background-image: image-url("icons/icon_search.png");

  @include device-pixel-ratio() {
    background-image: image-url("icons/icon_search-2x.png");
    background-size: 18px 18px;
  }
}
.icon-search-white {
  width: 18px;
  height: 18px;
  background-image: image-url("icons/icon_search-white.png");

  @include device-pixel-ratio() {
    background-image: image-url("icons/icon_search-white-2x.png");
    background-size: 18px 18px;
  }
}
.icon-location-white {
  width: 18px;
  height: 18px;
  background-image: image-url("icons/icon_location-white.png");

  @include device-pixel-ratio() {
    background-image: image-url("icons/icon_location-white-2x.png");
    background-size: 18px 18px;
  }
}
.icon-play {
  width: 18px;
  height: 23px;
  background-image: image-url("icons/icon_play.png");

  @include device-pixel-ratio() {
    background-image: image-url("icons/icon_play-2x.png");
    background-size: 18px 23px;
  }
}
.icon-play-white {
  width: 18px;
  height: 23px;
  background-image: image-url("icons/icon_play-white.png");

  @include device-pixel-ratio() {
    background-image: image-url("icons/icon_play-white-2x.png");
    background-size: 18px 23px;
  }
}

.icon-paginate-next {
  width: 32px;
  height: 57px;
  background-image: image-url("icons/icon_paginate-next.png");

  @include device-pixel-ratio() {
    background-image: image-url("icons/icon_paginate-next-2x.png");
    background-size: 32px 57px;
  }
}
.icon-paginate-previous {
  width: 32px;
  height: 57px;
  background-image: image-url("icons/icon_paginate-previous.png");

  @include device-pixel-ratio() {
    background-image: image-url("icons/icon_paginate-previous-2x.png");
    background-size: 32px 57px;
  }
}
