@use "system/breakpoints";
@use "system/colors";
@use "system/spacing";
@use "system/typography";
@use "system/units";
@use "../link/mixins";
@use "system/states";

.ods-personalized-content-link {
  @extend %ods-padding-4, %ods-padding-6-breakpoint-large;

  border: 0.25rem solid colors.$green-light;
  column-gap: units.unit-to-rem(3);
  @include breakpoints.large {
    column-gap: units.unit-to-rem(4);
  }

  &--focus,
  &:focus-visible {
    outline-offset: -0.125rem;
    border: 0.25rem solid colors.$blue-state;
    outline: 0.25rem solid colors.$purple-light;
  }

  display: grid;
  grid-template-columns: 1fr;
  text-decoration: none;
  width: 100%;

  &__icon {
    color: colors.$blue-dark;
    font-size: units.unit-to-rem(8);
    line-height: units.unit-to-rem(8);
    @include breakpoints.large {
      font-size: units.unit-to-rem(10);
      line-height: units.unit-to-rem(10);
    }
  }

  &__title {
    @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large;
    @extend %ods-text--weight-medium;
    @extend %ods-margin-bottom-1;
  }

  &__text {
    @extend %ods-text--size-lima;
    @extend %ods-text--weight-light;
  }


  &--hover,
  &--focus,
  &--active,
  &:hover,
  &:focus,
  &:active {
    .ods-personalized-content-link__text {
      color: states.$hover;
    }

    .ods-personalized-content-link__title {
      text-decoration: underline;
      color: states.$hover;
    }
  }

  &:visited,
  &--visited {
    .ods-personalized-content-link__title,
    .ods-personalized-content-link__text {
      color: states.$visited;
    }
  }

  &--icon {
    grid-template-columns: units.unit-to-rem(8) 1fr;
    @include breakpoints.large {
      grid-template-columns: units.unit-to-rem(10) 1fr;
    }
  }

  &.ods-link--external {
    &::after,
    &:hover::after {
      content: none !important;
    }

    .ods-personalized-content-link__text:last-of-type {
      @include mixins.icon-right("new-window");
    }
  }

  /**
   * Add modifiers for the color palette so that border and icon color can be changed.
   */
  @each $name, $color in colors.$colors {
    &--border-#{$name} {
      border-color: $color;
    }

    &--icon-#{$name} {
      .ods-personalized-content-link__icon {
        color: $color;
      }
    }
  }
}