// 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 button shape
/// @group utility-mixins
/// @param {string} $style [] - Specifies the style type (sass, css)
/// @param {string} $env [] - Specifies the style environment (component, noncomponent)
/// @param {string} $display [inline-block] - Specifies display type
/// @example scss - import mixin file
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityMixins/anchor-roleButton";
/// @example scss - Set properties for Sass output that is NOT within a component
///   .auro_roleButton {
///       @include auro_anchorButton(sass, noncomponent);
///   }
/// @example scss - Set properties for CSS output that IS within a component
///   .button {
///       @include auro_anchorButton(css, component)
///   }
@mixin auro_anchorButton($style, $env, $display: inline-block) {
  $color: null;
  $hover-color: null;
  $line-height: null;
  $padding: null;
  $hover-color: null;

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

  display: $display;

  padding: $padding;

  text-decoration: none;

  color: $color;
  border: 1px solid transparent;

  line-height: $line-height;

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

        color: $hover-color;
      }
    }
  } @else if $env == noncomponent {
    @media (hover: hover) {
      &:hover {
        cursor: pointer;
        text-decoration: underline;

        color: $hover-color;
      }
    }
  } @else {
    @error 'Invalid $env option. Please use `component` or `noncomponent`';
  }
}