$color-hover-gray: rgb(235, 235, 235);
$color-black: rgb(33, 33, 33);
$color-orange: rgb(250, 175, 0);
$color-pinkish: rgb(242, 110, 169);
$color-white: rgb(255, 255, 255);
$color-lightest-blue: rgb(224, 238, 255);
$color-ultraviolet: rgb(196, 29, 252);
$color-azure: rgb(16, 111, 183);
$color-red: rgb(244, 62, 62);
$color-gray-dark: rgb(102, 102, 102);
$color-dark-green: rgb(59, 135, 62);
$color-blue: rgb(62, 132, 244);
$color-purple: rgb(129, 51, 255);
$color-toxic: rgb(232, 244, 67);
$color-outline-gray: rgb(204, 204, 204);
$color-light-green: rgb(113, 193, 116);
$color-light-blue: rgb(169, 199, 244);
$color-gray: rgb(145, 145, 145);
$size-xxl: 48px;
$size-xxxxl: 64px;
$size-l: 20px;
$size-m: 16px;
$size-xxxl: 56px;
$size-xl: 34px;
$size-s: 13px;
$size-xs: 10px;
$size-ll: 28px;
$font-heading: 'Montserrat', sans-serif;
$weight-bold: 700;
$weight-semi-bold: 600;
$weight-medium: 500;
$weight-normal: 400;
$weight-light: 300;
$opacity-disabled: 0.6;
$opacity-active: 0.7;
$opacity-hover: 0.8;
$height-auth: 665px;
$avatar-xs: 24px;
$height-header: 65px;
$avatar-l: 56px;
$avatar-m: 42px;
$height-table-head: 48px;
$avatar-s: 32px;
$container-m: 1064px;
$tappable-element-xl: 72px;
$panel-xl: 500px;
$panel-l: 380px;
$tappable-element-l: 48px;
$panel-m: 320px;
$tappable-element-m: 40px;
$height-footer: 64px;
$container-s: 810px;
$separator-xs: 1px;
$height-top-line: 56px;
$tappable-element-xs: 24px;
$panel-s: 250px;
$tappable-element-xxs: 16px;
$tappable-element-s: 32px;
$separator-s: 2px;
$avatar-xl: 92px;
$site-width-m: 1200px;
$duration-quickly: 0.15s;
$duration-standart: 0.3s;
$duration-slowly: 0.5s;
$z-index-dropdown: 100;
$z-index-modal: 9999;
$z-index-sticky: 100;
$z-index-header: 10000;
$z-index-top-line: 9999;
$z-index-notification: 10001;
$z-index-overlay: 10002;
$media-query-s-down: (max-width: 479px);
$media-query-s: (min-width: 480px);
$media-query-m-down: (max-width: 767px);
$media-query-xl: (min-width: 1200px);
$media-query-l-down: (max-width: 1023px);
$media-query-xxl-down: (max-width: 1439px);
$media-query-xs: (min-width: 375px);
$media-query-xs-down: (max-width: 374px);
$media-query-l: (min-width: 1024px);
$media-query-xxl: (min-width: 1440px);
$media-query-m: (min-width: 768px);
$media-query-xl-down: (max-width: 1199px);
$shadow-l: 0 3px 12px rgba(0, 0, 0, 0.33);
$shadow-m: 0 3px 6px rgba(0, 0, 0, 0.16);
$shadow-s: 0 0 0 1px rgba(92,106,196,.1);
$spacing-m: 0.4px;
$radius-xxxxl: 60px;
$radius-xl: 10px;
$radius-l: 8px;
$radius-m: 4px;
$radius-s: 2px;
$radius-circle: 50%;
$space-xxl: 128px;
$space-xl: 64px;
$space-l: 48px;
$space-m: 24px;
$space-s: 16px;
$space-xs: 8px;
$space-xxs: 4px;
$space-xxxs: 2px;
$line-height-m: 1.6;
$line-height-s: 1.3;
$line-height-xs: 1;
$green-gradient: linear-gradient(to bottom, hsla(68, 68%, 58%, 1) 0%, hsla(137, 41%, 56%, 1) 100%);
$violet-gradient: linear-gradient(to bottom, hsla(293, 99%, 54%, 1) 0%, hsla(263, 93%, 59%, 1) 100%);
$blue-gradient: linear-gradient(to bottom, hsla(189, 99%, 54%, 1) 0%, hsla(216, 93%, 59%, 1) 100%);
$gradient-auth: linear-gradient(-42deg, #391c5f 0%, #5b2770 100%);
$pink-gradient: linear-gradient(to bottom, hsla(352, 88%, 65%, 1) 0%, hsla(293, 92%, 78%, 1) 100%);
$gradient-notification: linear-gradient(to right, hsl(205, 93%, 54%) 0%, hsl(192, 100%, 46%) 100%);
$gradient-input: linear-gradient(80deg,#f5566b,#f193fb);
$yellow-gradient: linear-gradient(to bottom, hsla(53, 99%, 54%, 1) 0%, hsla(31, 93%, 59%, 1) 100%);
$red-gradient: linear-gradient(to bottom, hsla(359, 84%, 67%, 1) 0%, hsla(27, 91%, 60%, 1) 100%);

/* VUE DESIGN SYSTEM SPACING HELPERS
--------------------------------------------- */

$spacing-ratio: $line-height-m;

/*
  INSET-SPACE: For interface containers.
  INSET-SQUISH-SPACE: For buttons, form elements, cells.
  STACK-SPACE: For vertically stacked content.
  INLINE-SPACE: For things displayed inline.
*/

// Create inset-space
//
// @param  {Number} inset-space to set
@mixin inset-space($value) {
  padding: $value;
}

// Create inset-squish-space
//
// @param  {Number} inset-squish-space to set
@mixin inset-squish-space($value) {
  padding: round($value / $spacing-ratio - 1px) $value round($value / $spacing-ratio);
}

// Create stack-space
//
// @param  {Number} stack-space to set
@mixin stack-space($value) {
  margin-bottom: $value;
  &:last-child {
    margin-bottom: 0;
  }
}

// Create inline-space
//
// @param  {Number} inline-space to set
@mixin inline-space($value) {
  margin-right: $value;
  &:last-child {
    margin-right: 0;
  }
}

@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 pseudo($display: block, $pos: absolute, $content: "") {
  content: $content;
  display: $display;
  position: $pos;
}

@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: #f43e3e;
  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 box($max-width: 1360px) {
  //padding-left: 20px;
  //padding-right: 20px;
  //margin-left: auto;
  //margin-right: auto;
  //max-width: $max-width;
  //
  //@media (min-width: $screen-md-up) {
  //    padding-left: 30px;
  //    padding-right: 30px;
  //}
  //
  //@media (min-width: $screen-xl-up) {
  //    padding-left: 60px;
  //    padding-right: 60px;
  //}
}

@mixin img-ofi() {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  //content: '';
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@mixin indent-top($size: "middle", $indent-type: "padding") {
  @if ($size == "small") {
    #{$indent-type}-top: 30px;
  }

  @if ($size == "middle") {
    #{$indent-type}-top: 30px;
  }

  @if ($size == "large") {
    #{$indent-type}-top: 30px;
  }
}

@mixin indent-bottom($size: "middle", $indent-type: "padding") {
  @if ($size == "small") {
    #{$indent-type}-bottom: 30px;
  }

  @if ($size == "middle") {
    #{$indent-type}-bottom: 30px;
  }

  @if ($size == "large") {
    #{$indent-type}-bottom: 30px;
  }
}

@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;
  }
}

@mixin child-indent-bottom($space) {
  > *:not(:last-child) {
    margin-bottom: $space;
  }
}

@mixin child-indent-right($space) {
  > *:not(:last-child) {
    margin-right: $space;
  }
}

/* GLOBAL FUNCTIONS
--------------------------------------------- */

// Create a tint
//
// @param  {Color}  $color to tint
// @param  {Number} $percentage of `$color` in returned color
// @return {Color}
@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

// Create a shade
//
// @param  {Color}  $color to shade
// @param  {Number} $percentage of `$color` in returned color
// @return {Color}
@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

// Calculate color difference
// See https://www.w3.org/TR/AERT/#color-contrast for algorithm
//
// @param  {Color} $color of foreground
// @param  {Color} $color of background
// @return {Boolean}
@function color-difference($foreground, $background) {
  $r: (max(red($foreground), red($background))) - (min(red($foreground), red($background)));
  $g: (max(green($foreground), green($background))) - (min(green($foreground), green($background)));
  $b: (max(blue($foreground), blue($background))) - (min(blue($foreground), blue($background)));
  $sum-rgb: $r + $g + $b;

  @if $sum-rgb < 350 {
    @return "false";
  } @else {
    @return "true";
  }
}

// Set text color based on contrast
//
// @param  {Color}  $color to set
// @param  {Color}  $background color to test
// @param  {Color}  $fallback color to set in case contrast check fails
@function set-text-color($color, $background, $fallback: null) {
  @if $fallback == null {
    $fallback: #000;
  }
  @if (color-difference($color, $background) == "false") {
    @return $fallback;
  } @else {
    @return $color;
  }
}

/// Darkens the foreground color by the background color. This is the same as the
/// “multiply” filter in graphics apps.
///
/// @param {Color} $foreground - The color to darken.
/// @param {Color} $background - The background to base darkening on.
/// @return {Color} The modified color.
@function color-multiply($foreground, $background: null) {
  @if $background == null {
    $background: #ffffff;
  }

  @return $foreground * $background / 255;
}

/// Returns the value in rem for a given pixel value.
/// @param {Number} $value - The pixel value to be converted.
/// @return {Number} The converted value in rem.
@function rem($value) {
  $unit: unit($value);

  @if $unit == "rem" {
    @return $value;
  } @else if $unit == "px" {
    @return $value / $size-m * 1rem;
  } @else if $unit == "em" {
    @return $unit / 1em * 1rem;
  } @else {
    @error "Value must be in px, em, or rem.";
  }
}

/// Returns the value in pixels for a given rem value.
/// @param {Number} $value - The rem value to be converted.
/// @return {Number} The converted value in pixels.
@function px($value) {
  $unit: unit($value);

  @if $unit == "px" {
    @return $value;
  } @else if $unit == "em" {
    @return ($value / 1em) * $size-m;
  } @else if $unit == "rem" {
    @return ($value / 1rem) * $size-m;
  } @else {
    @error "Value must be in rem, em, or px.";
  }
}

/// Returns the list of available names in a given map.
/// @param {Map} $map - The map of data to list the names from.
/// @param {Number} $map - The level of depth to get names from.
/// @return {String} The list of names in the map.
@function available-names($map, $level: 1) {
  @if type-of($map) != "map" {
    @return null;
  }

  $output: "";
  $newline: "\A ";

  @if $level == 1 {
    @each $key, $value in $map {
      $output: $output + "#{$newline}- #{$key} #{available-names($value, $level + 1)}";
    }
  } @else {
    $output: "(";
    $i: 1;

    @each $key, $value in $map {
      $sep: if($i < length($map), ", ", "");
      $output: $output + "#{$key}#{$sep}#{available-names($value, $level + 1)}";
      $i: $i + 1;
    }

    $output: $output + ")";
  }

  @return $output;
}

/**
 * Преобразование пикселей в em на основе переменной с базовым размером шрифта
 * (указывается в px) проекта.
 * @param  {number} $px Число без единиц измерения, кол-во пикселей
 * @param  {string} $font-size Число пикселей, размер конт. шрифта на проекте
 * @return {string} Результат преобразования $px в em на основе $font-size
 */

@function px-to-em($px, $font-size: $font-size) {
  @return (($px * 100 / ($font-size / 1px)) / 100) * 1em;
}

/**
 * Преобразование пикселей в множитель
 * @param  {number} $line-height Число без единиц измерения, высота строки
 * @param  {number} $font-size Число без единиц измерения, размер шрифта
 * @return {number} Результат преобразования $line-height в множитель на основе $font-size
 */
@function line-height($line-height, $font-size) {
  @return round(($line-height / $font-size) * 100) / 100;
}