// Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved.
// This software is released under MIT license.
// The full license information can be found in LICENSE in the root directory of this project.

//Credit: Zurb Foundation for Apps https://github.com/zurb/foundation-apps/blob/master/scss/helpers/_functions.scss
//Keep track of modules that have been imported, so we don't import more than once
$imported-modules: () !default;
@mixin exports($name) {
  //check if they have been imported
  @if (index($imported-modules, $name) == null) {
    $imported-modules: append($imported-modules, $name) !global;
    @content;
  }
}

//TODO: Should these mixins be moved into their own separate file?
//Outline Styles
$clr-outline-color: hsl(197, 68%, 65%) !default;
$clr-outline-color-inverse: hsla(0, 0%, 100%, 0.09) !default;
$clr-outline-blur: 2px;
$clr-outline-spread: 2px;

@mixin include-outline-style-form-fields(
  $outline-color: $clr-outline-color,
  $outline-blur: $clr-outline-blur,
  $outline-spread: $clr-outline-spread
) {
  outline: 0;
  box-shadow: 0 0 $outline-blur $outline-spread $outline-color;
}

@mixin include-outline-style-links() {
  outline: 0;
  text-decoration: underline;
}

@mixin include-outline-style-header-links($outline-color: $clr-outline-color-inverse) {
  background: $outline-color;
  outline: 0;
  text-decoration: none;
}

@mixin overflow-ellipsis() {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@mixin off-screen-styles() {
  position: fixed !important;
  border: none !important;
  height: 1px !important;
  width: 1px !important;

  left: 0px !important;
  top: -1px !important;

  overflow: hidden !important;
  visibility: hidden !important;

  padding: 0 !important;
  margin: 0 0 -1px 0 !important;
}

@mixin remove-text-decoration() {
  &:hover,
  &:active {
    text-decoration: none;
  }
}

@mixin focus-within() {
  &:focus-within,
  &.focus-within {
    outline: 2px solid Highlight;
  }

  @media (-webkit-min-device-pixel-ratio: 0) {
    &:focus-within,
    &.focus-within {
      outline: 5px auto -webkit-focus-ring-color;
    }
  }
}
