//
// Orange component link
//

.link {
  // scss-docs-start link-css-vars
  --#{$prefix}link-icon-size: #{px-to-rem($ouds-link-size-icon-default)};
  --#{$prefix}link-icon-gap: #{$ouds-link-space-column-gap-icon-default};
  // scss-docs-end link-css-vars

  @extend %link-properties;
  @include get-font-size("label-large");
  display: inline-flex;
  align-items: center;
  min-width: $ouds-link-size-min-width;
  min-height: var(--#{$prefix}link-min-height, $ouds-link-size-min-height-default);
  padding: var(--#{$prefix}link-padding-block, $ouds-link-space-padding-block-default) $ouds-link-space-padding-inline;
  text-align: start;
  text-wrap: pretty;
  vertical-align: middle;
  background: transparent;
  border: 0;

  &:has(svg, img, .icon):not(:hover, :active, :focus-visible) {
    text-decoration: none;
  }

  svg,
  img,
  .icon {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    margin-right: var(--#{$prefix}link-icon-gap);
    overflow: hidden;
    font-size: var(--#{$prefix}link-icon-size);
    line-height: 1;
  }
}

.link-chevron,
.link-external {
  --#{$prefix}link-chevron-gap: #{$ouds-link-space-column-gap-chevron-default};

  // Extend for Boosted compatibility in which .link-chevron can be used without .link
  @extend .link;
  text-decoration: none;

  &:hover,
  &:active,
  &:focus-visible {
    text-decoration: underline;
  }

  &:hover {
    --#{$prefix}link-chevron-color: #{$ouds-link-color-content-hover};
  }

  &:focus-visible {
    --#{$prefix}link-chevron-color: #{$ouds-link-color-content-focus};
  }

  &:active {
    --#{$prefix}link-chevron-color: #{$ouds-link-color-content-pressed};
  }

  &[aria-disabled="true"] {
    --#{$prefix}link-chevron-color: #{$ouds-color-action-disabled};
  }
}

.link-chevron {
  // Chevron icon
  &:not(.back, .link-previous) { // @deprecated, will be removed in v1.6.0, use "link-previous" instead https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues/3742
    display: inline-block;
  }

  &.link-previous::before,
  &.back::before, // @deprecated, will be removed in v1.6.0, use "link-previous" instead https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues/3742
  &:not(.back, .link-previous)::after { // @deprecated, will be removed in v1.6.0, use "link-previous" instead https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues/3742
    display: inline-block;
    width: var(--#{$prefix}link-icon-size);
    min-width: var(--#{$prefix}link-icon-size);
    height: var(--#{$prefix}link-icon-size);
    margin-right: var(--#{$prefix}link-chevron-gap);
    vertical-align: text-bottom;
    content: "";
    background-color: var(--#{$prefix}link-chevron-color, $ouds-link-color-chevron-enabled);
    mask: $link-previous-icon center no-repeat;
    mask-size: var(--#{$prefix}link-icon-size);
  }

  &:not(.back, .link-previous)::after { // @deprecated, will be removed in v1.6.0, use "link-previous" instead https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues/3742
    margin-right: 0;
    margin-left: var(--#{$prefix}link-chevron-gap);
    transform: rotate(180deg);
  }
}

.link-external {
  display: inline-block;

  &::after {
    display: inline-block;
    width: var(--#{$prefix}link-icon-size);
    min-width: var(--#{$prefix}link-icon-size);
    height: var(--#{$prefix}link-icon-size);
    margin-left: var(--#{$prefix}link-chevron-gap);
    vertical-align: text-bottom;
    content: "";
    background-color: var(--#{$prefix}link-chevron-color, $ouds-link-color-chevron-enabled);
    mask: $link-external-icon center no-repeat;
    mask-size: var(--#{$prefix}link-icon-size);
  }
}

.colored-bg, // @deprecated, will be removed in v1.6.0, use "link-on-colored-bg" instead https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues/3742
.link-on-colored-bg {
  &.link,
  :is(.link, a) {
    --#{$prefix}link-color: #{$ouds-link-mono-color-content-enabled};
    --#{$prefix}link-chevron-color: var(--#{$prefix}link-color);

    &:hover {
      --#{$prefix}link-color: #{$ouds-link-mono-color-content-hover}; // OUDS mod
    }

    &:focus-visible {
      --#{$prefix}link-color: #{$ouds-link-mono-color-content-focus}; // OUDS mod
    }

    &:active {
      --#{$prefix}link-color: #{$ouds-link-mono-color-content-pressed}; // OUDS mod
    }

    &[aria-disabled="true"] {
      --#{$prefix}link-color: #{$ouds-link-mono-color-content-disabled}; // OUDS mod
    }
  }
}

.link-small {
  --#{$prefix}link-min-height: #{$ouds-link-size-min-height-small};
  --#{$prefix}link-padding-block: #{$ouds-link-space-padding-block-small};
  --#{$prefix}link-icon-size: #{px-to-rem($ouds-link-size-icon-small)};
  --#{$prefix}link-icon-gap: #{$ouds-link-space-column-gap-icon-small};
  --#{$prefix}link-chevron-gap: #{$ouds-link-space-column-gap-chevron-small};
  @include get-font-size("label-medium");
}

.link-compact {
  --#{$prefix}link-min-height: #{$ouds-link-size-min-height-compact-density};
  --#{$prefix}link-padding-block: #{$ouds-link-space-padding-block-compact-density-default};

  &:where(.link-small) {
    --#{$prefix}link-padding-block: #{$ouds-link-space-padding-block-compact-density-small};
  }
}

@if $enable-bootstrap-compatibility {
  .icon-link {
    @extend .link;
  }
}