/*
* @category controls
* @component link
* @design collaboration-design
*/

@import '../settings/core';
@import '../settings/colors';
@import '../tools/functions/core';
@import '../tools/mixins/focus';
@import '../tools/mixins/link';

@include exports('cui-link') {
  .#{$prefix}-link {
    width: fit-content;
    font-size: rem-calc(16);
    line-height: rem-calc(24);
    cursor: pointer;

    &:focus,
    &.focus-state {
      @include focus-styles;
    }

    &.disabled,
    &[disabled],
    &:disabled {
      pointer-events: none;
      opacity: 0.2;
    }

    &--blue {
      @include link-color(
        $color: $blue-dark,
        $color-hover: $blue-dark-hover,
        $color-active: $blue-dark-press
      );
    }

    &--red {
      @include link-color(
        $color: $red-dark,
        $color-hover: $red-dark-hover,
        $color-active: $red-dark-press
      );
    }

    &--green {
      @include link-color(
        $color: $green-dark,
        $color-hover: $green-dark-hover,
        $color-active: $green-dark-press
      );
    }

    &--yellow {
      @include link-color(
        $color: $yellow-dark,
        $color-hover: $yellow-dark-hover,
        $color-active: $yellow-dark-press
      );
    }

    &--orange {
      @include link-color(
        $color: $orange-dark,
        $color-hover: $orange-dark-hover,
        $color-active: $orange-dark-press
      );
    }

    &--dark {
      &.#{$prefix}-link {
        &--blue {
          @include link-color(
            $color: $blue-light,
            $color-hover: $blue-light-hover,
            $color-active: $blue-light-press
          );
        }

        &--red {
          @include link-color(
            $color: $red-light,
            $color-hover: $red-light-hover,
            $color-active: $red-light-press
          );
        }

        &--green {
          @include link-color(
            $color: $green-light,
            $color-hover: $green-light-hover,
            $color-active: $green-light-press
          );
        }

        &--yellow {
          @include link-color(
            $color: $yellow-light,
            $color-hover: $yellow-light-hover,
            $color-active: $yellow-light-press
          );
        }

        &--orange {
          @include link-color(
            $color: $orange-light,
            $color-hover: $orange-light-hover,
            $color-active: $orange-light-press
          );
        }
      }
    }
  }
}

/**
* @component link
* @section default
*
* @html
  <a class="cui-link cui-link--blue">Default Link</a>
  <div class="cui-link cui-link--blue">Div Link</div>
  <span class="cui-link cui-link--blue">Span Link</span>
*/