// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
// See LICENSE in the project root for license information.

// ---------------------------------------------------------------------

@import '../libSupport/deprecated';

/// Creates Sass variable or custom property output for multi-use tab shape
/// @group utility-mixins
/// @param {string} $style [] - Specifies the style type (sass, css)
/// @param {string} $env [] - Specifies the style environment (component, noncomponent)
/// @example scss - import mixin file
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/anchor-roleTab";
/// @example scss - Set properties for Sass output that is NOT within a component
///   .auro_roleTab {
///      @include auro_anchorTab(sass, noncomponent);
///   }
/// @example scss - Set properties for CSS output that IS within a component
///   .hyperlink--tab {
///       @include auro_anchorTab(css, component)
///   }
@mixin auro_anchorTab($style, $env) {
  $color: null;
  $border-color: null;
  $padding: null;
  $hover-color: null;
  $isactive-color: null;

  @if $style == css {
    $color: var(--ds-color-text-ui-default-default, $ds-color-text-ui-default-default);
    $border-color: var(--ds-color-border-primary-default, $ds-color-border-primary-default);
    $padding: var(--ds-size-200, $ds-size-200, $ds-size-200, $ds-size-200);
    $hover-color: var(--ds-color-container-ui-primary-hover-default, $ds-color-container-ui-primary-hover-default);
    $isactive-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
  } @else if $style == sass or $style == scss {
    $color: $ds-color-text-ui-default-default;
    $border-color: $ds-color-border-primary-default;
    $padding: $ds-size-200;
    $hover-color: $ds-color-container-ui-primary-hover-default;
    $isactive-color: $ds-color-text-primary-default;
  } @else {
    @error 'Invalid $style option. Please use `css` or `sass`';
  }

  padding: $ds-size-200;

  color: $color;
  border-width: 0 0 1px;
  border-style: solid;
  border-color: $border-color;

  @if $env == component {
    :host(:not(.is-touching)) & {
      &:hover {
        cursor: pointer;
        text-decoration: none;

        color: $hover-color;
        border-width: 0 0 2px;
        border-color: currentColor;
      }
    }
  } @else if $env == noncomponent {
    &:not(.is-touching) {
      &:hover {
        cursor: pointer;
        text-decoration: none;

        color: $hover-color;
        border-width: 0 0 2px;
        border-color: currentColor;
      }
    }
  } @else {
    @error 'Invalid $env option. Please use `component` or `noncomponent`';
  }

  &.is-active {
    cursor: pointer;
    text-decoration: none;

    color: $isactive-color;
    border-width: 0 0 2px;
    border-color: currentColor;
  }
}