// 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';

// sass-lint:disable no-important
// sass-lint:disable indentation

/// Creates Sass variable or custom property output for multi-use focus-visible shape
/// @group utility-mixins
/// @param {string} $syntax [] - sets user's request for style of variable return (css, sass)
/// @example scss - import mixin file
///   @import "./node_modules/@alaskaairux/webcorestylesheets/dist/utilityMixins/focusVisible";
/// @example scss - Set properties for Sass output
///  .focus-visible {
///    &.hyperlink {
///      @include auro_focus-hyperlink(sass)
///    }
///  }
/// @example css - Set properties for CSS output
///  :host(.focus-visible) {
///    .hyperlink
///      @include auro_focus-hyperlink(css);
///    }
///  }
@mixin auro_focus-hyperlink($syntax) {
  @if variable-exists(auro-color-text-primary-on-dark) {
    $color: null;
    $background-color: null;
    $outline: null;
    $hover-color: null;

    @if $syntax == css {
      $color: var(--auro-color-text-primary-on-dark);
      $background-color: var(--auro-color-ui-default-on-light);
      $outline: var(--auro-color-ui-default-on-light) solid var(--auro-size-xxs);
      $hover-color: var(--auro-color-text-primary-on-dark) !important;
    } @else if $syntax == sass or $syntax == scss {
      $color: $auro-color-text-primary-on-dark;
      $background-color: $auro-color-ui-default-on-light;
      $outline: $auro-color-ui-default-on-light solid $auro-size-xxs;
      $hover-color: $auro-color-text-primary-on-dark !important;
    }

    color: $color;
    outline: $outline;
    background-color: $background-color;

    &:hover {
      color: $hover-color;
    }
  }
}