/**
 * Copyright IBM Corp. 2016, 2024
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

@use '@carbon/styles/scss/breakpoint' as *;
@use '@carbon/styles/scss/config' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/type' as *;
@use '@carbon/styles/scss/components/link';
@use '../../globals/vars' as *;
@use '../../globals/imports' as *;
@use '../lightbox-media-viewer/lightbox-media-viewer';

@mixin link-with-icon {
  .#{$prefix}--link-with-icon,
  :host(#{$c4d-prefix}-link-with-icon),
  :host(#{$c4d-prefix}-link-list-item),
  :host(#{$c4d-prefix}-link-list-item-cta),
  :host(#{$c4d-prefix}-text-cta) {
    span {
      flex: 1;
      align-self: center;
      vertical-align: middle;
    }

    svg,
    ::slotted(svg[slot='icon']) {
      display: inline;
      align-self: middle;
      fill: currentColor;
      margin-inline-start: $spacing-03;
    }

    &.#{$prefix}--link--visited {
      color: $link-visited;
    }

    &.#{$prefix}--link--disabled {
      &:hover {
        @include type-style('body-compact-02');
      }
    }

    // Re-define the ruleset so this wins over `.cds--link:visited`, etc.
    .#{$prefix}--link--disabled {
      color: $text-disabled;
    }

    &.#{$prefix}--link-with-icon__icon-left,
    .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon.#{$prefix}--link-with-icon__icon-left {
      display: flex;
      flex-direction: row-reverse;
      justify-content: flex-end;

      svg,
      ::slotted(svg[slot='icon']) {
        position: relative;
        align-self: start;
        inset-block-start: 1px;
        margin-inline: 0 $spacing-03;
      }
    }
  }

  .#{$prefix}--link-with-icon__container,
  :host(#{$c4d-prefix}-callout-link-with-icon),
  :host(#{$c4d-prefix}-card-cta-footer),
  :host(#{$c4d-prefix}-card-footer),
  :host(#{$c4d-prefix}-link-with-icon),
  :host(#{$c4d-prefix}-link-list-item),
  :host(#{$c4d-prefix}-link-list-item-cta),
  :host(#{$c4d-prefix}-text-cta) {
    .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {
      display: inline-block;

      &:hover {
        text-underline-position: under;
      }

      svg,
      ::slotted(svg[slot='icon']) {
        display: inline;
        vertical-align: middle;
        white-space: nowrap;
      }
    }
  }

  :host(#{$c4d-prefix}-card-cta-footer)[mode='link-list'][cta-type='video'] {
    .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon span {
      display: none;

      @include breakpoint(lg) {
        display: inline;
      }
    }
  }

  .#{$prefix}--link-with-icon,
  :host(#{$c4d-prefix}-link-with-icon),
  :host(#{$c4d-prefix}-text-cta) {
    &:not(:first-of-type) {
      margin-inline-start: $spacing-07;
    }

    .#{$prefix}--link-with-icon__icon-left::slotted(svg[slot='icon']) {
      margin-inline: 0 $spacing-03;
    }

    .#{$prefix}--link-with-icon__icon-right::slotted(svg[slot='icon']) {
      margin-inline: $spacing-03 0;
    }

    &:focus {
      outline: $spacing-01 solid $focus;
    }

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

  :host(#{$c4d-prefix}-link-with-icon),
  :host(#{$c4d-prefix}-text-cta) {
    &:focus {
      outline: none;
    }
  }

  :host(#{$c4d-prefix}-link-with-icon),
  .#{$prefix}--link-with-icon__container {
    display: table;
  }
}