// colors
$white: #fff;
$black: #000;
$pastel: #ff915a;
$melon: #ff785a;
$pale-orange: #ffaa5a;
$rusty-orange: #d85812;
$dark: #2f384a;
$dark-two: #0e111d;
$pinkish-red: #df0f33;
$pinkish-grey: #c3c3c3;

$montserratRegular: 'Montserrat';
$montserratBold: 'Montserrat-bold';

$loaderColor: var(--sp-loader-color, $white);

$progressBarColor1: var(--sp-first-progress-bar-color, $pastel);
$progressBarColor2: var(--sp-second-progress-bar-color, $melon);

$waitingRoomRing1: var(--sp-first-waiting-ring-color, $pastel);
$waitingRoomRing2: var(--sp-second-waiting-ring-color, $melon);

$cuePointColor1: var(--sp-first-cue-point-color, $pastel);
$cuePointColor2: var(--sp-second-cue-point-color, $melon);

$unmuteLabelBgColor: var(--sp-unmute-label-bg-color, $white);
$unmuteLabelPrimaryColor: var(--sp-unmute-label-primary-color, $black);

$iconPrimaryColor: var(--sp-icons-primary-color, $white);
$iconSecondaryColor: var(--sp-icons-secondary-color, $black);
$iconActiveColor: var(--sp-icons-active-color, $pastel);
$iconErrorColor: var(--sp-icons-error-color, $pinkish-red);

$backgroundColor: var(--sp-background-color, $black);

$titleColor: var(--sp-text-title-color, $white);
$descColor: var(--sp-text-desc-color, $white);
$textErrorColor: var(--sp-text-error-color, $white);

$fontRegular: var(--sp-font-regular, $montserratRegular);
$fontBold: var(--sp-font-bold, $montserratBold);

// colors alpha channel
$rusty-orange-25: rgba($rusty-orange, 0.25);
$rusty-two-80: rgba($dark-two, 0.8);
$black-60: rgba($black, 0.6);

// box-shadows
$bs-play-icon: 0 7px 15px 0 rgba($pastel, 0.28);
$bs-progress-bar: 0 4px 11px 0 $rusty-orange-25;

// gradients
$g-shadow: linear-gradient(to bottom, rgba(47, 56, 74, 0), #2f384a);
$g-shadow-bottom: linear-gradient(to bottom, rgba($black, 0), $black);
$g-progress-bar: linear-gradient(to right, $progressBarColor1 4%, $progressBarColor2 102%);

// transitions
$t-peek: all 0.1s ease-in-out;
$t-basic: all 0.2s ease-in-out;

// progress bar
$progress-bar-height: 7px;
$progress-bar-radius: 4px;
$progress-range-size: 18px;
$progress-range-radius: 16px;

//
$video-radius: 10px;
$borderRadius: var(--sp-border-radius, $video-radius);

// media breakpoints
$mobile-min: 500px;
$tablet-min: 750px;
$laptop-min: 1000px;
$desktop-min: 1200px;
$desktop-md-min: 1300px;
$desktop-lg-min: 1400px;
$desktop-xl-min: 1600px;
$desktop-xxl-min: 1700px;