@import "govuk_publishing_components/individual_component_support";

$gem-c-print-link-background-width: 16px;
$gem-c-print-link-background-height: 18px;

.gem-c-print-link {
  display: none;
}

.gem-c-print-link.gem-c-print-link--show-without-js {
  display: block;
}

.govuk-frontend-supported {
  .gem-c-print-link {
    display: block;
  }
}

.gem-c-print-link__link,
.gem-c-print-link__button {
  background: url("govuk_publishing_components/icon-print.png") no-repeat govuk-spacing(2) 50%;
  background-size: $gem-c-print-link-background-width $gem-c-print-link-background-height;
  padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) (govuk-spacing(4) + $gem-c-print-link-background-width);
  text-decoration: none;

  @include govuk-device-pixel-ratio($ratio: 2) {
    background-image: url("govuk_publishing_components/icon-print-2x.png");
  }

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

.gem-c-print-link__link {
  box-shadow: inset 0 0 0 1px govuk-colour("dark-grey");

  &:focus {
    border: 0;
    box-shadow: 0 $govuk-focus-width $govuk-text-colour;
  }
}

.gem-c-print-link__button {
  border: 1px solid govuk-colour("dark-grey");
  color: $govuk-link-colour;
  cursor: pointer;
  margin: govuk-spacing(0);
  @include govuk-font(16);

  &:focus {
    background-color: $govuk-focus-colour;
    border-color: transparent;
    @include govuk-focused-text;
  }
}
