/*
 * Colors
 * (Named using "Name that color") - http://chir.ag/projects/name-that-color
 * -------------------------------------------------------------------------- */
/**
 * @tokens Colors Base
 * @presenter Color
 */
/**
 * @tokens Colors Promo
 * @presenter Color
 */
/**
 * @tokens Colors System
 * @presenter Color
 */
/**
 * @tokens Colors Others
 * @presenter Color
 */
/**
 * Map with all possible units to be used by other utilities (i.e. fluid value)
 */
/**
 * Adds unit to a number
 * @param {Number} $value - Value to add unit to
 * @param {String} $unit - String representation of the unit
 * @return {Number} - `$value` expressed in `$unit`
 */
/**
 * Returns a number without units
 */
/**
 * Returns a rem value from a number of pixels.
 * Its uses 16px as root font-size
 */
/**
 * Returns a px value from a number of rems.
 * Its uses 16px as root font-size
 */
/**
 * Returns a rem value from a map
 */
/* -------------------------------------------------------------------------- *\
 *  INSETS
 * --------------------------------------------------------------------------
 *  An inset offers indents content on all four sides like the matte of the
 *  framed photo on a wall
 *
 *  $inset-X : a b;
 *  $inset-stack-X : a;
 *  $inset-inline-X : b;
 *
 *  -----------------------
 *  |          a          |
 *  |   ---------------   |
 *  | b |             | b |
 *  |   ---------------   |
 *  |          a          |
 *  -----------------------
 *
\* -------------------------------------------------------------------------- */
/**
 * @tokens Inset Block
 * @presenter Spacing
 */
/**
 * @tokens Inset Inline
 * @presenter Spacing
 */
/**
 * @tokens Insets
 * @presenter Spacing
 */
/* -------------------------------------------------------------------------- *\
 *  Main header
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Footer
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Main content
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Landing pages
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Account pages
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Form Login content
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Product Page
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Cart/Minicart
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Article pages
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Home Page
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Customizer
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  CTA static buttons
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  IOS navigator bottom spacing
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Rest of variables
 * -------------------------------------------------------------------------- */
/**
 * Returns a new string with some or all matches of a pattern replaced by a replacement
 * @param {String} $string - Initial string
 * @param {String} $search - Value to replace
 * @param {String} $replace - Replacement
 * @return {String} New string
 */
/*
  NOTE: Setup the svg.
    1- export the svg from the sketch in abstract
    2- go to optimizer, https://jakearchibald.github.io/svgomg/
    3- Copy source, check if need to have some changes in the path or fill.
*/
/* stylelint-disable scss/operator-no-unspaced */
/**
 * Payment cards used in account, visa, mastercard,
 */
/* stylelint-enable scss/operator-no-unspaced */
/**
 * Returns an url encoded SVG with the given color
 * @param {String} $icon - SVG code
 * @param {String} $fill-color - Fill color
 * @param {String} $stroke-color - Stroke color
 * @return {String} URL encoded svg
 */
/**
 * Returns a fluid value between two points in the viewport variable dimension.
 * This linear function can be applied to any property (width, font-size, ...).
 * @param {Number} $v1 - Value at init point - Linear function's Y1
 * @param {Number} $v2 - Value at end point - Linear function's Y2
 * @param {Number} $init - Init point in pixels - Linear function's X1
 * @param {Number} $end - End point in pixels - Linear function's X2
 * @param {Number} $var-dim - Variable dimension: 100vw as default, or 100vh, 100%
 * examples:
 * width: byl-linear-fluid-value(70vw, 58vw, 810px, 1024px);
 * padding-bottom: byl-linear-fluid-value(24px, 48px, 1025px, 1920px, 100%);
 * font-size: byl-linear-fluid-value(1rem, 2rem, 320px, 768px),
 * letter-spacing: byl-linear-fluid-value(0, 1px, 768px, 1024px),
 */
/* 1025 is used instead of 1024 because touch devices design is not specified */
/**
 * @tokens Font Families
 * @presenter FontFamily
 */
/** System monospace */
/**
 * @tokens Font Weights
 * @presenter FontWeight
 */
/**
 * @tokens Font Sizes
 * @presenter FontSize
 */
/* -------------------------------------------------------------------------- *\
==============
| The Search |
==============
MOBILE:  Header < Search            PDPModals must hide the main header
                                    to show only a back button (as APP)
                                    Reference: SF-7800
------------------------------------------------------------------------
TABLET:                             no relevance
------------------------------------------------------------------------
DESKTOP: Header > Search            Subcategories must be viewed over
                                    the search form and its results
                                    Reference: SF-11932
\* -------------------------------------------------------------------------- */
/*
* Page Designer byl-player Component
*/
.byl-player__backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 35;
  display: none;
  width: 100%;
  height: 100%;
  background-color: hsl(0, 0%, 0%);
  opacity: 0.5;
}
.byl-player__progress {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 2.1875rem;
}
.byl-player__controls {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.byl-player__control {
  color: var(--controls-color);
  background-color: transparent;
  border: medium none currentColor;
  border: initial;
  cursor: pointer;
}
.byl-player__control svg {
  width: inherit;
  height: inherit;
}
.byl-player__btn-play-pause, .byl-player__btn-play-pause--small {
  background-color: transparent;
  border: medium none currentColor;
  border: initial;
  /* stylelint-disable max-nesting-depth */
  /* stylelint-enable max-nesting-depth */
}
.byl-player__btn-play-pause[data-state=Play] .byl-player__btn-pause, .byl-player__btn-play-pause--small[data-state=Play] .byl-player__btn-pause {
  display: block;
}
.byl-player__btn-play-pause[data-state=Play] .byl-player__btn-play, .byl-player__btn-play-pause--small[data-state=Play] .byl-player__btn-play {
  display: none;
}
.byl-player__btn-play-pause[data-state=Pause] .byl-player__btn-pause, .byl-player__btn-play-pause--small[data-state=Pause] .byl-player__btn-pause {
  display: none;
}
.byl-player__btn-play-pause[data-state=Pause] .byl-player__btn-play, .byl-player__btn-play-pause--small[data-state=Pause] .byl-player__btn-play {
  display: block;
}
.byl-player__btn-play-pause {
  width: 76px;
  height: 76px;
}
.byl-player__btn-play-pause--small {
  display: none;
}
.byl-player__seek-bwd, .byl-player__seek-fwd {
  width: 33px;
  height: 37px;
}
.byl-player__range {
  flex-grow: 1;
  width: 100%;
  padding-right: 16px;
  padding-left: 16px;
  background: transparent;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  /* Styling Thumb */
  /* Styling track */
}
.byl-player__range:focus {
  outline: none;
}
.byl-player__range::-webkit-slider-thumb {
  width: 0.8125rem;
  height: 0.8125rem;
  margin-top: calc(-0.8125rem / 2);
  background-color: var(--controls-color);
  border-radius: 50%;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}
.byl-player__range::-moz-range-thumb {
  width: 0.8125rem;
  height: 0.8125rem;
  background-color: var(--controls-color);
  border: medium none currentColor;
  border: initial;
  border-radius: 50%;
  cursor: pointer;
}
.byl-player__range::-ms-thumb {
  width: 0.8125rem;
  height: 0.8125rem;
  background: transparent;
  border: medium none currentColor;
  border: initial;
  cursor: pointer;
}
.byl-player__range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.125rem;
  background-color: var(--controls-color);
  cursor: pointer;
  opacity: 1;
}
.byl-player__range::-moz-range-track {
  width: 100%;
  height: 0.125rem;
  background-color: var(--controls-color);
  cursor: pointer;
  opacity: 1;
}
.byl-player__range::-ms-track {
  width: 100%;
  height: 0.125rem;
  color: transparent;
  background: transparent;
  border: medium none currentColor;
  border: initial;
  cursor: pointer;
  opacity: 1;
}
.byl-player__time-display {
  min-width: 50px;
  font-size: 0.625rem;
}

/* Video styles */
.byl-player--video .byl-player__controls-header, .byl-player--video .byl-player__controls, .byl-player--video .byl-player__progress {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  pointer-events: none;
}
.byl-player--video .byl-player__controls-header.active, .byl-player--video .byl-player__controls.active, .byl-player--video .byl-player__progress.active {
  opacity: 1;
  pointer-events: all;
}
.byl-player--video .byl-player__controls-header {
  position: absolute;
  top: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 16px 16px;
  line-height: 1.25;
}
.byl-player--video .byl-player .btn-close {
  width: 1rem;
  height: 1rem;
}
.byl-player--video .byl-player__controls {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.byl-player--video .byl-player__progress {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-right: 16px;
  padding-left: 16px;
}

/* Audio styles */
.byl-player--audio {
  position: fixed;
  bottom: 0;
  z-index: 1050;
  width: 100%;
  background-color: hsl(0, 0%, 100%);
}
.byl-player--audio .byl-player__title {
  display: none;
}
.byl-player--audio .byl-player__now-playing {
  display: none;
  width: 100%;
  padding-bottom: 32px;
  line-height: 1.25;
  text-align: left;
}
.byl-player--audio .byl-player__picture {
  min-width: 3.75rem;
}
.byl-player--audio .byl-player__image {
  width: 3.75rem;
  height: 3.75rem;
  margin-right: 10px;
  -o-object-fit: cover;
     object-fit: cover;
}
.byl-player--audio .byl-player__btn-close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 1.125rem;
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path fill="none" stroke="hsl(0, 0%, 0%)" stroke-width="1" d="M4.002 1.001l5.494 5.001L4.002 11"/></svg>');
  transform: rotate(-90deg) translateX(-25%);
  cursor: pointer;
  pointer-events: initial;
}
.byl-player--audio .byl-player__container {
  display: flex;
  align-items: center;
  padding-right: 47px;
}
.byl-player--audio .byl-player__controls {
  margin-left: 12px;
}
.byl-player--audio .byl-player__progress {
  flex-grow: 1;
  width: 100%;
  height: 3.75rem;
}
.byl-player--audio .byl-player__range {
  padding-right: 0;
}
.byl-player--audio .byl-player__range::-webkit-slider-thumb {
  background-color: hsl(0, 0%, 0%);
}
.byl-player--audio .byl-player__range::-moz-range-thumb {
  background-color: hsl(0, 0%, 0%);
}
.byl-player--audio .byl-player__time-display {
  color: hsl(0, 0%, 0%);
}
.byl-player--audio .byl-player__time-display--left {
  position: absolute;
  right: 0;
  bottom: 6px;
}
.byl-player--audio .byl-player__seek-bwd, .byl-player--audio .byl-player__seek-fwd, .byl-player--audio .byl-player__time-display--current, .byl-player--audio .byl-player__header {
  display: none;
}
.byl-player--audio .byl-player__tracks .experience-region {
  display: none;
}
.byl-player--audio .byl-player__btn-play-pause {
  display: none;
}
.byl-player--audio .byl-player__btn-play-pause--small {
  display: block;
  width: 16px;
  height: 20px;
}
.byl-player--audio--open {
  flex-direction: column;
  border-radius: 15px 15px 0 0;
}
.byl-player--audio--open .byl-player__range::-webkit-slider-thumb {
  margin-top: calc(-0.8125rem / 3);
}
.byl-player--audio--open .byl-player__now-playing {
  display: block;
}
.byl-player--audio--open .byl-player__picture {
  width: 100%;
}
.byl-player--audio--open .byl-player__image {
  width: 100%;
  height: auto;
}
.byl-player--audio--open .byl-player__btn-close {
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><g fill-rule="evenodd"><path d="M0 11.326L.647 12 12 .674 11.353 0z" fill="hsl(0, 0%, 0%)"/><path d="M11.353 12l.647-.674L.647 0 0 .674z" fill="hsl(0, 0%, 0%)"/></g></svg>');
}
.byl-player--audio--open .byl-player__container {
  flex-direction: column;
  padding: 16px 16px;
}
.byl-player--audio--open .byl-player__seek-bwd,
.byl-player--audio--open .byl-player__seek-fwd,
.byl-player--audio--open .byl-player__time-display--current,
.byl-player--audio--open .byl-player__header {
  display: block;
}
.byl-player--audio--open .byl-player__btn-play-pause {
  display: block;
  width: 76px;
  height: 76px;
}
.byl-player--audio--open .byl-player__btn-play-pause--small {
  display: none;
}
.byl-player--audio--open .byl-player__controls {
  order: 2;
  max-width: 185px;
  margin: auto;
}
.byl-player--audio--open .byl-player__time-display--current,
.byl-player--audio--open .byl-player__time-display--left {
  position: absolute;
  top: 53px;
}
.byl-player--audio--open .byl-player__time-display--current {
  left: 0;
}
.byl-player--audio--open .byl-player__time-display--left {
  right: 0;
}
.byl-player--audio--open .byl-player__progress {
  margin: 0;
}
.byl-player--audio--open .byl-player__range {
  padding: 0;
}
.byl-player--audio--open .byl-player__tracks {
  display: block;
  order: 3;
}
.byl-player--audio--open .byl-player__tracks .experience-region {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 16px;
}
.byl-player--audio--open .byl-player__track-btn {
  display: block;
  margin: 0 8px;
  line-height: 1.25;
  cursor: pointer;
}
.byl-player--audio--open .byl-player__track-btn.selected {
  font-weight: 900;
  text-decoration: underline;
}

/*# sourceMappingURL=bylPlayer.css.map*/