@import "govuk_publishing_components/individual_component_support";

.gem-c-subscription-links {
  @include govuk-text-colour;
  @include govuk-font(19, $weight: bold);
}

.gem-c-subscription-links__hidden-header {
  @include govuk-visually-hidden;
}

.gem-c-subscription-links__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gem-c-subscription-links__list--small {
  @include govuk-font(16);
}

.gem-c-subscription-links__list-item {
  display: inline-block;
  vertical-align: middle;
  margin-right: govuk-spacing(4);
  margin-bottom: govuk-spacing(3);

  &:last-child {
    margin-right: 0;
  }
}

.gem-c-subscription-links__list-item--small {
  display: inline-block;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: govuk-spacing(2);

  &:first-child {
    margin-right: govuk-spacing(2);
  }

  &:only-child {
    margin-right: 0;
  }
}

.gem-c-subscription-links__item {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 0 20%;

  @include govuk-media-query($from: tablet) {
    background-position: 0 35%;
  }
}

.gem-c-subscription-links__item--button {
  cursor: pointer;
  display: none;
  padding: govuk-spacing(2);
  border: 1px solid $gem-quiet-button-colour;
  background-color: $gem-secondary-button-background-colour;
  @include govuk-font(19, $weight: bold);

  .govuk-frontend-supported & {
    display: inline-block;
  }

  &:not(.brand__color) {
    color: $govuk-link-colour;
  }

  &:hover {
    color: $govuk-link-hover-colour;
  }

  &:visited,
  &:active,
  &:focus {
    text-decoration: none;
  }

  &:focus {
    color: $govuk-focus-text-colour;
    border: 1px solid $govuk-focus-colour;
    outline: 3px solid transparent;
  }

  &:hover:not(:focus) {
    background-color: $gem-secondary-button-hover-background-colour;
    text-decoration: none;
  }
}

.gem-c-subscription-links__feed-box {
  padding: govuk-spacing(3);
  margin-bottom: govuk-spacing(3);
  background: govuk-colour("light-grey");

  .govuk-frontend-supported &.js-hidden {
    display: none;
  }
}

.gem-c-subscription-links__feed-hidden-description {
  .govuk-frontend-supported & {
    @include govuk-visually-hidden;
  }
}

.gem-c-subscription-links__icon {
  margin-right: govuk-spacing(1);
  color: govuk-colour("black");
}

.gem-c-subscription-links__list-item--small .gem-c-subscription-links__icon {
  @include scale(.9);
  transform-origin: bottom left;
}

.gem-c-subscription-links--with-feed-box {
  .gem-c-subscription-links__item--link {
    padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) 0;
    border: 1px solid transparent;

    &:focus {
      border-bottom-color: transparent;
    }
  }
}