@use '@igo2/sdg-core' as sdg;

.sdg-tile {
  &-container {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-between;
    row-gap: var(--sdg-spacer-8);
    border: 1px solid var(--sdg-color-grey-light);
    background-color: var(--sdg-color-background);
    box-shadow: var(--sdg-elevation-1);
    padding: var(--sdg-spacer-32) var(--sdg-spacer-24) var(--sdg-spacer-16);
    width: 100%;
    min-width: 256px;
    max-width: 352px;
    height: 100%;
    cursor: pointer;

    &:hover {
      border: 1px solid var(--sdg-color-blue-normal);
      box-shadow: var(--sdg-elevation-2);
    }

    &:focus-visible {
      border: 2px solid var(--sdg-color-blue-dark);
      outline: 2px solid var(--sdg-color-blue-light);
    }

    &:hover .sdg-tile-arrow,
    &:focus-visible .sdg-tile-arrow {
      visibility: visible;
    }

    @include sdg.media(mobile) {
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
      max-width: 100%;
      width: 100%;
      column-gap: var(--sdg-spacer-8);
      padding: var(--sdg-spacer-24);
    }
  }

  &-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
  }

  &-title-container {
    display: flex;
    align-items: center;
    column-gap: var(--sdg-grid-spacing-md);
    flex-flow: column;
    row-gap: var(--sdg-spacer-8);

    @include sdg.media(mobile) {
      flex-flow: row;
    }
  }

  &-title {
    font-size: var(--sdg-font-size-lg);
    color: var(--sdg-color-text);
    text-align: center;

    @include sdg.media(mobile) {
      text-align: left;
    }
  }

  &-icon {
    $size: 40px;
    color: var(--sdg-color-text);
    flex-shrink: 0;
    width: $size;
    height: $size;
    font-size: $size;
  }

  &-message {
    color: var(--sdg-color-text);
    text-align: left;
    flex-grow: 1;
    font-size: var(--sdg-font-size-sm);
    line-height: var(--sdg-line-height-sm);
    padding-top: var(--sdg-spacer-8);
  }

  &-arrow-container {
    display: flex;
    justify-content: flex-end;
    align-self: flex-end;
    margin-top: auto;
    width: 100%;

    @include sdg.media(mobile) {
      width: fit-content;
      margin: auto;
    }
  }

  &-arrow {
    $size: 18px;
    flex-shrink: 0;
    visibility: hidden;
    align-self: flex-end;
    width: $size;
    height: $size;
    font-size: $size;

    @include sdg.media(mobile) {
      visibility: visible;
    }
  }
}

.--with-message {
  .sdg-tile {
    &-title-container {
      flex-flow: row;
    }

    &-title {
      text-align: left;
    }

    &-arrow {
      @include sdg.media(mobile) {
        align-self: auto;
      }
    }
  }
}

.--with-icon {
  .sdg-tile {
    &-content {
      justify-content: flex-start;
    }
  }
}