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

sdg-anchor ::ng-deep a {
  display: flex;
  flex-flow: column;
  row-gap: 8px;
  text-decoration: none;
  cursor: pointer;

  &:hover {
    .sdg-block-link-title {
      text-decoration: underline;

      &-arrow {
        visibility: visible;

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

.sdg-block-link {
  &-title {
    color: var(--sdg-color-blue-piv);
    margin: 0 !important;
    text-decoration: none;

    &-arrow {
      vertical-align: middle;
      width: 16px;
      height: 16px;
      font-size: 16px;
      visibility: hidden;
      margin-left: 8px;
    }

    &.--no-description {
      color: var(--sdg-color-text);
    }
  }

  &-description {
    margin: 0 !important;
  }
}