@import "govuk_publishing_components/individual_component_support";

$share-button-width: 30px;
$share-button-height: 30px;

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

.gem-c-share-links__list-item {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  min-height: $share-button-height;
  padding-top: govuk-spacing(1);
  padding-left: ($share-button-width + govuk-spacing(2));
  padding-right: govuk-spacing(2);
  margin-bottom: govuk-spacing(2);
  font-size: calc($share-button-height / 2);
}

.gem-c-share-links__link {
  margin-right: govuk-spacing(6);
  @include govuk-font(16, $weight: bold);
  @include govuk-template-link-focus-override;
}

.gem-c-share-links__link-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: $share-button-width;
  height: $share-button-height;
  line-height: $share-button-height;
}

.gem-c-share-links__svg {
  width: 100%;
  height: 100%;
}

.direction-rtl {
  .gem-c-share-links__link {
    display: inline-block;
    margin-right: 0;
    margin-left: govuk-spacing(6);
  }

  .gem-c-share-links__list-item {
    padding-left: govuk-spacing(2);
    padding-right: ($share-button-width + govuk-spacing(2));
  }

  .gem-c-share-links__link-icon {
    left: auto;
    right: 0;
  }
}

$column-width: 9.5em;

.gem-c-share-links--columns {
  .gem-c-share-links__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax($column-width, 1fr));
    @include govuk-clearfix;
  }

  .gem-c-share-links__list-item {
    float: left;
    min-width: $column-width;
  }

  .gem-c-share-links__link {
    margin: 0;
  }
}

.gem-c-share-links--stacked {
  .gem-c-share-links__list-item {
    display: block;
  }
}

.gem-c-share-links--flexbox {
  .gem-c-share-links__list {
    display: flex;
    flex-wrap: wrap;
  }

  .gem-c-share-links__list-item {
    padding-left: 0;
    padding-right: 0;
    min-width: 180px;
  }

  .gem-c-share-links__link-icon {
    display: inline-flex;
    position: relative;
    vertical-align: middle;
    margin-right: govuk-spacing(2);
  }

  .gem-c-share-links__label {
    vertical-align: middle;
  }

  .gem-c-share-links__link {
    display: inline-block;
  }
}

.gem-c-share-links--square-icons {
  .gem-c-share-links__link-icon {
    background-color: govuk-colour("dark-blue");
    color: govuk-colour("white");
    padding: govuk-spacing(2);
  }

  .gem-c-share-links__link:hover {
    .gem-c-share-links__link-icon {
      background-color: govuk-colour("black");
    }
  }

  .gem-c-share-links__link:focus {
    .gem-c-share-links__link-icon {
      background-color: govuk-colour("black");
    }
  }

  .gem-c-share-links__label {
    color: govuk-colour("black");
    @include govuk-font(19, $weight: bold);
  }
}