/**
 *
 * @ai-apps/angular v2.152.0 | _helper-mixins.scss
 *
 * Copyright 2014, 2023 IBM
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0

 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


//
// Copyright IBM Corp. 2016, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

//----------------------------------------------
// Mixins
// ---------------------------------------------
//
//   Category             ||  Description
//   ===========================================
//   Misc                 ||  General helper @mixins
//   Deprecated           ||  Not used anymore
//   ===========================================

//----------------------------------------------
// Misc
// ---------------------------------------------

@import 'vars';
@import 'css--reset';
@import 'typography';
@import './vendor/@carbon/elements/scss/import-once/import-once';

/// Adds text overflow styling
/// @access public
/// @param {Number} $width [false] - Value of width if you want to set width, else nothing
/// @example @include text-overflow(300px);
/// @group global-helpers
@mixin text-overflow($width: false) {
  display: block;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  // apply a width if width parameter exists
  @if ($width) {
    width: $width;
  }
}

/// Adds placeholder text color
/// @access public
/// @example @include placeholder-colors;
/// @group global-helpers
@mixin placeholder-colors {
  color: $text-05;
  opacity: 1;
}

/// Adds box shadow
/// @access public
/// @example @include box-shadow;
/// @group global-helpers
@mixin box-shadow {
  box-shadow: 0 2px 6px $shadow;
}

/// Adds outline styles depending on specific type
/// @access public
/// @param {String} $type ['border'] - Type of outline from: `border`, `blurred`, `outline`, `invalid`, `reset`
/// @example @include focus-outline('outline');
/// @group global-helpers
@mixin focus-outline($type: 'border') {
  @if ($type == 'border') {
    outline: 1px solid $focus;

    @media screen and (prefers-contrast) {
      outline-style: dotted;
    }
  }

  @if ($type == 'blurred') {
    box-shadow: 0 0 0 3px $focus;
    outline: 1px solid transparent;
  }

  @if ($type == 'outline') {
    outline: 2px solid $focus;
    outline-offset: -2px;

    @media screen and (prefers-contrast) {
      outline-style: dotted;
    }
  }

  @if ($type == 'outline-compat') {
    box-sizing: border-box;
    border: 2px solid $focus;

    @media screen and (prefers-contrast) {
      border-style: dotted;
    }
  }

  @if ($type == 'invalid') {
    outline: 2px solid $support-01;
    outline-offset: -2px;

    @media screen and (prefers-contrast) {
      outline-style: dotted;
    }
  }

  @if ($type == 'reset') {
    outline: 2px solid transparent;
    outline-offset: -2px;
  }
}

/// Adds rotational transformation
/// @access public
/// @param {Number} $deg - How many degrees to rotate
/// @param {Number} $speed - Speed of rotation
/// @param {Value} $origin [center] - `transform-origin`
/// @example @include rotate(90deg, 300ms);
/// @group global-helpers
@mixin rotate($deg, $speed, $origin: center) {
  transform: rotate($deg);
  transform-origin: $origin;
  transition: transform $speed;
}

/// Adds styles to hide content
/// @access public
/// @group global-helpers
@mixin hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  visibility: inherit;
  white-space: nowrap;
}

/// Resets button styles
/// @access public
/// @param {Bool} $width [true] - Sets width to 100% if true
/// @example @include button-reset($width: false);
/// @group global-helpers
@mixin button-reset($width: true) {
  @include reset;

  display: inline-block;
  padding: 0;
  border: 0;
  appearance: none;
  background: none;
  cursor: pointer;

  @if ($width == true) {
    width: 100%;
  }

  &::-moz-focus-inner {
    border: 0;
  }
}

/// Skeleton loading animation
/// @access public
/// @example @include skeleton;
/// @group global-helpers
@mixin skeleton {
  position: relative;
  padding: 0;
  border: none;
  background: $skeleton-01;
  box-shadow: none;
  pointer-events: none;

  &:hover,
  &:focus,
  &:active {
    border: none;
    cursor: default;
    outline: none;
  }

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: 3000ms ease-in-out skeleton infinite;
    background: $skeleton-02;
    content: '';
    will-change: transform-origin, transform, opacity;

    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }
  }
}

@include exports('skeleton') {
  @keyframes skeleton {
    0% {
      opacity: 0.3;
      transform: scaleX(0);
      transform-origin: left;
    }

    20% {
      opacity: 1;
      transform: scaleX(1);
      transform-origin: left;
    }

    28% {
      transform: scaleX(1);
      transform-origin: right;
    }

    51% {
      transform: scaleX(0);
      transform-origin: right;
    }

    58% {
      transform: scaleX(0);
      transform-origin: right;
    }

    82% {
      transform: scaleX(1);
      transform-origin: right;
    }

    83% {
      transform: scaleX(1);
      transform-origin: left;
    }

    96% {
      transform: scaleX(0);
      transform-origin: left;
    }

    100% {
      opacity: 0.3;
      transform: scaleX(0);
      transform-origin: left;
    }
  }
}

/// Windows HCM Mixin
/// @access public
/// @example @include high-contrast-mode;
/// @group global-helpers
/// We should set HCM styles at the end of each file to ensure they are not overridden
@mixin high-contrast-mode($type: '') {
  @media screen and (-ms-high-contrast: active),
    (forced-colors: active),
    (prefers-contrast) {
    @if ($type == 'icon-fill') {
      fill: ButtonText;
    }

    @if ($type == 'focus') {
      color: Highlight;
      outline: 1px solid Highlight;
    }

    @if ($type == 'outline') {
      outline: 1px solid transparent;
    }

    @if ($type == 'disabled') {
      color: GrayText;
      fill: GrayText;
    }

    @content;
  }
}
