// ==========================================================================
// Plyr variables
// https://github.com/sampotts/plyr
// ==========================================================================

// Settings
@plyr-border-box: true;
@plyr-touch-action: true;
@plyr-sr-only-important: true;

// Colors
@plyr-color-main: #1aafff;
@plyr-color-gunmetal: #2f343d;
@plyr-color-fiord: #4f5b5f;
@plyr-color-lynch: #6b7d85;
@plyr-color-heather: #b7c5cd;

// Type
@plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
@plyr-font-size-base: 16px;
@plyr-font-size-small: 14px;
@plyr-font-size-time: 14px;
@plyr-font-size-badge: 10px;
@plyr-font-weight-regular: 500;
@plyr-font-weight-bold: 600;
@plyr-line-height: 1.7;
@plyr-font-smoothing: on;

// Focus
@plyr-tab-focus-default-color: @plyr-color-main;

// Captions
@plyr-captions-bg: fade(#000, 80%);
@plyr-captions-color: #fff;
@plyr-font-size-captions-base: @plyr-font-size-base;
@plyr-font-size-captions-small: @plyr-font-size-small;
@plyr-font-size-captions-medium: 18px;
@plyr-font-size-captions-large: 21px;

// Controls
@plyr-control-icon-size: 18px;
@plyr-control-icon-size-large: 20px;
@plyr-control-spacing: 10px;
@plyr-control-padding: (@plyr-control-spacing * 0.7);
@plyr-control-radius: 3px;

@plyr-video-controls-bg: #000;
@plyr-video-control-color: #fff;
@plyr-video-control-color-hover: #fff;
@plyr-video-control-bg-hover: @plyr-color-main;

@plyr-audio-controls-bg: #fff;
@plyr-audio-control-color: @plyr-color-fiord;
@plyr-audio-control-color-hover: #fff;
@plyr-audio-control-bg-hover: @plyr-color-main;

// Tooltips
@plyr-tooltip-bg: fade(#fff, 90%);
@plyr-tooltip-color: @plyr-color-fiord;
@plyr-tooltip-padding: (@plyr-control-spacing / 2);
@plyr-tooltip-arrow-size: 4px;
@plyr-tooltip-radius: 3px;
@plyr-tooltip-shadow: 0 1px 2px fade(#000, 15%);

// Menus
@plyr-menu-bg: @plyr-tooltip-bg;
@plyr-menu-color: @plyr-tooltip-color;
@plyr-menu-arrow-size: 6px;
@plyr-menu-border-color: @plyr-color-heather;
@plyr-menu-border-shadow-color: #fff;
@plyr-menu-shadow: 0 1px 2px fade(#000, 15%);

// Progress
@plyr-progress-loading-size: 25px;
@plyr-progress-loading-bg: fade(@plyr-color-gunmetal, 20%);
@plyr-video-progress-buffered-bg: fade(#fff, 25%);
@plyr-audio-progress-buffered-bg: fade(@plyr-color-heather, 66%);

// Range sliders
@plyr-range-track-height: 6px;
@plyr-range-thumb-height: 14px;
@plyr-range-thumb-bg: #fff;
@plyr-range-thumb-border: 2px solid transparent;
@plyr-range-thumb-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%), 0 0 0 1px fade(@plyr-color-gunmetal, 20%);
@plyr-range-fill-bg: @plyr-color-main;

@plyr-range-thumb-active-border-color: #fff;
@plyr-range-thumb-active-bg: @plyr-video-control-bg-hover;
@plyr-range-thumb-active-height: 20px;

@plyr-video-range-track-bg: @plyr-video-progress-buffered-bg;
@plyr-audio-range-track-bg: @plyr-audio-progress-buffered-bg;

// Breakpoints
@plyr-bp-sm: 480px;
@plyr-bp-md: 768px;
@plyr-bp-lg: 1024px;

// Max-width media queries
@plyr-bp-xs-max: (@plyr-bp-sm - 1);
@plyr-bp-sm-max: (@plyr-bp-md - 1);
@plyr-bp-md-max: (@plyr-bp-lg - 1);

// Mobile first
@plyr-mq-sm: ~'only screen and (min-width: @{plyr-bp-sm}) ';
@plyr-mq-md: ~'only screen and (min-width: @{plyr-bp-md}) ';
@plyr-mq-lg: ~'only screen and (min-width: @{plyr-bp-lg}) ';

// Mobile last
@plyr-mq-xs-max: ~'only screen and (max-width: @{plyr-bp-xs-max}) ';
@plyr-mq-sm-max: ~'only screen and (max-width: @{plyr-bp-sm-max}) ';
@plyr-mq-md-max: ~'only screen and (max-width: @{plyr-bp-md-max}) ';