@use "../../variables/units";
@use "../../variables/colors";
@use "../link";

@use "tile.variables" as tile-variables;

@mixin root() {
  &:not(.dso-theme) {
    background: colors.$wit;
    box-shadow: tile-variables.$box-shadow;
    margin-block-end: tile-variables.$margin-block-end;
    min-block-size: tile-variables.$min-block-size;
    padding-block: units.$u3 units.$u2;
    padding-inline: units.$u2;
    position: relative;
    inset-block-start: units.$u7;
  }

  &.dso-theme {
    margin: 0;

    .dso-tile-icon {
      align-items: center;
      background-color: tile-variables.$icon-background-color;
      border-radius: 50%;
      border: 1px solid tile-variables.$icon-border-color;
      color: tile-variables.$icon-color;
      display: flex;
      block-size: tile-variables.$icon-size;
      justify-content: center;
      margin-block: 0 units.$u1;
      margin-inline: auto;
      overflow: hidden;
      inline-size: tile-variables.$icon-size;

      img {
        block-size: units.$u7;
        inline-size: units.$u7;
      }
    }
  }

  .dso-tile-icon {
    display: block;
    margin-block-end: units.$u2;
    text-align: center;

    img {
      block-size: 80px;
      inline-size: 80px;
    }
  }

  .dso-tile-link {
    border-block-end: #{units.$u1 * 0.5} solid transparent;
    color: colors.$grasgroen;
    display: block;
    font-size: units.$font-size-h4;
    font-weight: bold;
    line-height: 1.167;
    padding-block-end: #{units.$u1 * 0.5};
    text-align: center;
  }

  a {
    @include link.clean();

    &:hover,
    &:active {
      .dso-tile-link {
        border-block-end: #{units.$u1 * 0.5} solid colors.$grasgroen;
      }
    }

    &:active {
      text-decoration: none;
    }
  }
}

@mixin equal-heights() {
  block-size: calc(100% - #{tile-variables.$margin-block-end});
  min-block-size: auto;
}