@import "../../../settings/all";
@import "../../../tools/all";
@import "../../../helpers/all";

@mixin tile-borders {
  $border-color: #ededed;

  border-style: solid;
  border-color: $border-color;
}

@include govuk-exports("govuk/component/sdn-tiles") {

  $text-color: #000000;
  $text-color-hover: #3e3e3e;

  .sdn-tiles {
    @include tile-borders;
    display: -ms-flexbox;
    display: flex;
    border-width: 2px 0 0 2px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  .sdn-tiles__item {
    @include tile-borders;
    box-sizing: border-box;
    width: 50%;
    border-width: 0 2px 2px 0;
    color: $text-color;
    text-decoration: none;
    cursor: pointer;

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

    &:hover {
      opacity: .9;
      color: $text-color-hover;
      background-color: govuk-colour("white");
      text-decoration: underline;
    }

    @include govuk-media-query($from: tablet) {
      width: 33%;
    }

    @include govuk-media-query($from: desktop) {
      width: 25%;
    }
  }

  .sdn-tile {
    display: -ms-flexbox;
    display: flex;
    padding: 16px;
    -ms-flex-direction: column;
        flex-direction: column;
  }

  .sdn-tile__image {
    height: 150px;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
  }

  .sdn-tile__content {
    margin-top: 35px;
    margin-bottom: 15px;
  }

  .sdn-tile-content-text-block {
    display: -ms-flexbox;
    display: flex;
    font-weight: bold;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
  }

  .sdn-tile-content-text-block__item {
    @include govuk-font($size: 24, $line-height: 1.5);
    font-weight: bold;
    text-align: center;
  }
}