@import "~bourbon/core/bourbon";

/* GLOBAL MIXINS
--------------------------------------------- */

/* AUTO SCALING FOR TYPE WITH MIN/MAX SIZES

  @param {Number}  $responsive  - Viewport-based size
  @param {Number}  $min         - Minimum font size (px)
  @param {Number}  $max         - Maximum font size (px) (optional)

  @param {Number}  $fallback    - Fallback for viewport-based units (optional)

  @example SCSS - 5vw size, 35px min & 150px max size + 50px fallback:

  @include responsive-font(5vw, 35px, 150px, 50px);
*/
@mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
  $responsive-unitless: $responsive / ($responsive - $responsive + 1);
  $dimension: if(unit($responsive) == "vh", "height", "width");
  $min-breakpoint: $min / $responsive-unitless * 100;

  @media (max-#{$dimension}: #{$min-breakpoint}) {
    font-size: $min;
  }

  @if $max {
    $max-breakpoint: $max / $responsive-unitless * 100;

    @media (min-#{$dimension}: #{$max-breakpoint}) {
      font-size: $max;
    }
  }

  @if $fallback {
    font-size: $fallback;
  }

  font-size: $responsive;
}

// Reset
@mixin reset {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/// To be used on flex items. Resolves some common layout issues, such as
/// text truncation not respecting padding or breaking out of container.
/// https://css-tricks.com/flexbox-truncated-text/
@mixin layout-flex-fix {
  min-width: 0;
  max-width: 100%;
}

@mixin align($vertical: true, $horizontal: false, $position: relative) {
  @if $position {
    position: $position;
  }
  @if $vertical {
    top: 50%;
  }
  @if $horizontal {
    left: 50%;
  }

  @if $vertical and $horizontal {
    transform: translateX(-50%) translateY(-50%);
  } @else if $vertical {
    transform: translateY(-50%);
  } @else {
    transform: translateX(-50%);
  }
}

@mixin hardware($backface: true, $perspective: 1000) {
  @if $backface {
    backface-visibility: hidden;
  }

  perspective: $perspective;
}

@mixin pos($pos, $t, $r, $b, $l, $z: false, $hardware: true) {
  @if $pos == fixed and $hardware {
    @include hardware;
  }
  @if $pos {
    position: $pos;
  }
  @if $t {
    top: $t;
  }
  @if $r {
    right: $r;
  }
  @if $b {
    bottom: $b;
  }
  @if $l {
    left: $l;
  }
  @if $z {
    z-index: $z;
  }
}

@mixin pseudo($display: block, $pos: absolute, $content: "") {
  content: $content;
  display: $display;
  position: $pos;
}

/*
	Responsive ratio
	Used for creating scalable elements that maintain the same ratio
	example:
	.element {
		@include responsive-ratio(400, 300);
	}
*/

@mixin responsive-ratio($x, $y, $pseudo: false) {
  $padding: unquote(($y / $x) * 100 + "%");

  @if $pseudo {
    &::before {
      @include pseudo($pos: relative);
      width: 100%;
      padding-top: $padding;
    }
  } @else {
    padding-top: $padding;
  }
}

/*
	Form input placeholder text

	example:

	input,
	textarea {
		@include input-placeholder {
			color: $grey;
		}
	}
*/

@mixin input-placeholder {
  &.placeholder {
    @content;
  }
  &:-moz-placeholder {
    @content;
  }
  &::-moz-placeholder {
    @content;
  }
  &:-ms-input-placeholder {
    @content;
  }
  &::-webkit-input-placeholder {
    @content;
  }
}

@mixin selection {
  ::-moz-selection {
    @content;
  }
  ::selection {
    @content;
  }
}

@mixin reset-text-indents() {
  font-size: 0;
  line-height: 0;
}

// Reset btn styles

@mixin reset-btn() {
  box-sizing: border-box;
  display: block;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  border-radius: 0;
  border: none;
  background-color: transparent;
  background-image: none;
  cursor: pointer;
  outline: 0;
  font-size: 0;
  line-height: 0;
  font-family: inherit;
  -webkit-appearance: none;
  -webkit-text-fill-color: currentColor;

  &:focus {
    outline: 0;
  }
}

@mixin interplay-link($color: $color-red) {
  &:hover,
  &:focus {
    color: $color;
  }

  &:active {
    color: darken($color, 8%);
  }
}

@mixin field-error() {
  color: $color-red;
  font-size: 13px;
  line-height: line-height(16, 13);
  display: block;
  margin-top: 5px;
}

@mixin custom-scroll() {
  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    transition: background 0.3s;
  }
  ::-webkit-scrollbar-track {
    //background: rgba(0, 0, 0, 0.1);
    //border: 1px solid #dcdcdc;
  }
  ::-webkit-scrollbar-thumb {
    background: hsl(240, 4%, 91%);
    border-radius: 2px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #c1c1c1;
  }
  ::-webkit-scrollbar-thumb:active {
  }
}

@mixin img-ofi($object-fit: "cover") {
  display: block;
  @include position(absolute, 0);
  @include size(100%);
  object-fit: $object-fit;
}

@mixin input-placeholder {
  &.placeholder {
    @content;
  }
  &:-moz-placeholder {
    @content;
  }
  &::-moz-placeholder {
    @content;
  }
  &:-ms-input-placeholder {
    @content;
  }
  &::-webkit-input-placeholder {
    @content;
  }
}

@mixin interplay() {
  &:hover,
  &:focus {
    background-color: #ebebeb; //$color-hover-gray;
  }

  &:active {
    background-color: #919191; //$color-gray;
  }
}

// This triangle can be used as hint or in the dropdown list instead of svg-icon
@mixin css-triangle($color: $color-orange, $direction: "up", $size: 6px, $position: absolute) {
  @include pseudo($pos: $position);
  @include size(0);
  @if $direction == down {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-top: $size solid $color;
    margin-top: 0 - round($size / 2.5);
  } @else if $direction == up {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size solid $color;
    margin-bottom: 0 - round($size / 2.5);
  } @else if $direction == right {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-left: $size solid $color;
    margin-right: -$size;
  } @else if $direction == left {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-right: $size solid $color;
    margin-left: -$size;
  }
}