{"version":3,"file":"./css/bitmovinplayer-ui.css","mappings":"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,sEAEA,aACE,8DAIJ,oBACE,0BACA,8EC2BI,UACE,6BAEA,6EAHF,yBACE,4CAEA,6EAHF,wBACE,2CAEA,6EAHF,yBACE,4CAEA,8EAHF,UACE,6BAEA,6EAHF,qBACE,wCAEA,6EAHF,oBACE,uCAEA,6EAHF,qBACE,wCAEA,4EAHF,SACE,4BAEA,2EAHF,uBACE,0CAEA,2EAHF,sBACE,yCAEA,2EAHF,uBACE,0CAEA,8EAHF,UACE,6BAEA,6EAHF,uBACE,0CAEA,6EAHF,sBACE,yCAEA,6EAHF,uBACE,0CAEA,6EAHF,UACE,6BAEA,4EAHF,uBACE,0CAEA,4EAHF,sBACE,yCAEA,4EAHF,uBACE,0CAEA,6EAHF,UACE,6BAEA,4EAHF,yBACE,4CAEA,4EAHF,wBACE,2CAEA,4EAHF,yBACE,4CAEA,+EAHF,UACE,6BAEA,8EAHF,yBACE,4CAEA,8EAHF,wBACE,2CAEA,8EAHF,yBACE,4CAEA,gFAHF,UACE,6BAEA,+EAHF,yBACE,4CAEA,+EAHF,wBACE,2CAEA,+EAHF,yBACE,4CAEA,6GAWA,qBACE,4GADF,oCACE,4GADF,mCACE,4GADF,oCACE,6GADF,qBACE,4GADF,gCACE,4GADF,+BACE,4GADF,gCACE,2GADF,oBACE,0GADF,kCACE,0GADF,iCACE,0GADF,kCACE,6GADF,qBACE,4GADF,kCACE,4GADF,iCACE,4GADF,kCACE,4GADF,qBACE,2GADF,kCACE,2GADF,iCACE,2GADF,kCACE,4GADF,qBACE,2GADF,oCACE,2GADF,mCACE,2GADF,oCACE,8GADF,qBACE,6GADF,oCACE,6GADF,mCACE,6GADF,oCACE,+GADF,qBACE,8GADF,oCACE,8GADF,mCACE,8GADF,oCACE,wFAWJ,qBACE,uFADF,oCACE,uFADF,mCACE,uFADF,oCACE,wFADF,qBACE,uFADF,gCACE,uFADF,+BACE,uFADF,gCACE,sFADF,oBACE,qFADF,kCACE,qFADF,iCACE,qFADF,kCACE,wFADF,qBACE,uFADF,kCACE,uFADF,iCACE,uFADF,kCACE,uFADF,qBACE,sFADF,kCACE,sFADF,iCACE,sFADF,kCACE,uFADF,qBACE,sFADF,oCACE,sFADF,mCACE,sFADF,oCACE,yFADF,qBACE,wFADF,oCACE,wFADF,mCACE,wFADF,oCACE,0FADF,qBACE,yFADF,oCACE,yFADF,mCACE,yFADF,oCACE,uEASJ,cACE,uEADF,eACE,wEADF,aACE,wEADF,eACE,wEADF,aACE,wEADF,aACE,wEADF,aACE,oFASA,gBACE,sFADF,sDACE,yFADF,2BACE,uFADF,+IACE,4FADF,0BACE,oFADF,gBACE,sFADF,sDACE,yFADF,2BACE,uFADF,+IACE,4FADF,0BACE,kFADF,gBACE,oFADF,mDACE,uFADF,0BACE,qFADF,uIACE,0FADF,yBACE,oFADF,gBACE,sFADF,sDACE,yFADF,2BACE,uFADF,+IACE,4FADF,0BACE,mFADF,gBACE,qFADF,sDACE,wFADF,2BACE,sFADF,+IACE,2FADF,0BACE,mFADF,gBACE,qFADF,sDACE,wFADF,2BACE,sFADF,+IACE,2FADF,0BACE,qFADF,gBACE,uFADF,sDACE,0FADF,2BACE,wFADF,+IACE,6FADF,0BACE,sFADF,gBACE,wFADF,sDACE,2FADF,2BACE,yFADF,+IACE,8FADF,0BACE,sFAQN,mEACE,wFAKF,0EACE,0FAKF,8EACE,4FAKF,sFACE,6EAKF,gDACE,8EAKF,iFACE,kBACA,mFAKF,uBACE,4EAMF,iBACE,0EAKF,eACE,CCjJF,2HAIA,yDACE,CCLF,iIAIA,yDACE,qPCRN,gCACE,8EAGF,oC/CgD+B,kB+C7C7B,WACA,YACA,UACA,kBACA,WACA,wK5CAA,Q4CMA,UACA,kBACA,C5CVA,oCACA,mBACA,C4CQA,SACA,kM5CPA,SACE,sCAEE,kBAEF,iCA8CF,kB4CrCA,aACA,CALF,W5CoCE,C4C/BA,sBACA,C5C8BA,MACA,SACA,kBACA,C4CjCA,iBACA,C5CgCA,KACA,C4CjCA,+BACA,C5CgCA,U4ChCA,0DAGA,kBACE,aACA,oFAEA,SAGE,qFAGF,QAGE,wCAIJ,SAEE,uCAGF,UAEE,CAKE,oHAKF,SACE,6CCvEN,cAIE,chD+FgB,agD7FhB,gBACA,ahD4FgB,0DG9FhB,YACE,mD6CIF,kC7C8GA,4D6C1GA,sBhDqFgB,YgDnFd,WACA,qEAIA,wDACE,sEAKF,wDACE,wMAOA,cACE,gBACA,wCClCN,gCACA,mBACA,CACA,qBACA,CAFA,gBACA,CANF,mBAOE,uDAEA,yDACE,qDAGF,ajDgDoB,sEiD3ClB,YACE,mEAIJ,qBjDlBY,2CkDJd,Q/CsEE,C+ChEA,2DACA,C/CiEA,qB+CnEA,4FACA,CACA,mBACA,C/C8DA,iBACA,W+C/DA,6CAEA,mBACE,oEAGF,mBACE,+EAIA,YACE,cACA,+DClBF,cACA,cACA,qBnD4Ec,gBA0BG,CmDlGjB,iBACA,CARF,mBACE,CnDwGiB,wBmDnGjB,mBAEA,oChD8DF,6DAiGA,CiDtJF,QjDmDE,CAmGA,qBiDhJA,8HAEA,CjD2CA,iBACA,WiD5CA,6DAGA,YACE,sBACA,6EAIA,cACE,sFAGF,YACE,mBACA,wFAGF,aACE,gEAKkE,qBACpE,CA7CF,UA4CsE,CACpE,eACA,CAlDA,SAIF,CA2CA,sGAGE,6EA1CA,QACA,CACA,eACA,CAFA,YACA,CAHF,SACE,CAGA,mBACA,yFAwCA,YACE,mBACA,gHAKA,gBACE,UACA,0JCxDJ,mBAGE,sPAGF,YAIE,iEAGF,wBrDuCkB,2EqD5BlB,YACE,mIC3BF,4BANiB,mEAUjB,UATgB,8BAed,iEAGF,QAlBgB,6BAwBd,kEAGF,QACE,UA5Bc,iFAiChB,UAjCgB,kGAoCd,UACE,kGAKF,+BACE,2BACA,oBACA,cACA,kBACA,iBACA,gGAOF,wDACE,WACA,+MAIF,cAEE,gBACA,yaAKJ,eAME,CAKA,6HC/EJ,YACE,qDAGF,evDiBiB,iFuDdf,OACE,sNAUE,cACE,yDACA,mBACA,wNAKF,cACE,0CAMR,0HAGE,gEAGA,cACE,2EAMF,QACE,CACA,gBACA,4BACA,CAHA,SACA,CAEA,WACA,sCCpDJ,kBACE,uB1DqDJ,UExCgB,uBA0DF,mBAIF,gBA8BS,cF/CnB,gBACA,iBACA,CAMI,ohBAKF,YAIE,yCAIJ,gBACE,4EAIA,+BE9BsB,CF0ClB,qYASJ,YACE,6vBAOA,oBErBa,2IF0Bf,QACE,+JEvBY,8BF4BZ,CAFF,sBAEE,uNAEA,OACE,qJAIJ,yCACE,CACA,cACA,8BACA,CAHA,2CACA,CAEA,WACA,2EAKF,SACE,044B","sources":["webpack://bitmovin-player-ui/./src/scss/bitmovinplayer-ui.scss","webpack://bitmovin-player-ui/./src/scss/components/_icon.scss","webpack://bitmovin-player-ui/./src/scss/_variables.scss","webpack://bitmovin-player-ui/./src/scss/components/_component.scss","webpack://bitmovin-player-ui/./src/scss/components/_uicontainer.scss","webpack://bitmovin-player-ui/./src/scss/_mixins.scss","webpack://bitmovin-player-ui/./src/scss/components/_control-bar.scss","webpack://bitmovin-player-ui/./src/scss/components/buttons/_button.scss","webpack://bitmovin-player-ui/./src/scss/components/buttons/_playback-toggle-button.scss","webpack://bitmovin-player-ui/./src/scss/components/buttons/_quick-seek-button.scss","webpack://bitmovin-player-ui/./src/scss/components/buttons/_fullscreen-toggle-button.scss","webpack://bitmovin-player-ui/./src/scss/components/buttons/_vr-toggle-button.scss","webpack://bitmovin-player-ui/./src/scss/components/buttons/_volume-toggle-button.scss","webpack://bitmovin-player-ui/./src/scss/components/buttons/_eco-mode-toggle-button.scss","webpack://bitmovin-player-ui/./src/scss/components/seekbar/_seek-bar.scss","webpack://bitmovin-player-ui/./src/scss/components/_watermark.scss","webpack://bitmovin-player-ui/./src/scss/components/buttons/_huge-playback-toggle-button.scss","webpack://bitmovin-player-ui/./src/scss/components/labels/_label.scss","webpack://bitmovin-player-ui/./src/scss/components/settings/_settings-panel.scss","webpack://bitmovin-player-ui/./src/scss/components/settings/_settings-panel-page.scss","webpack://bitmovin-player-ui/./src/scss/components/settings/_settings-panel-item.scss","webpack://bitmovin-player-ui/./src/scss/components/settings/_settings-panel-page-open-button.scss","webpack://bitmovin-player-ui/./src/scss/components/settings/_settings-panel-page-back-button.scss","webpack://bitmovin-player-ui/./src/scss/components/settings/_settings-toggle-button.scss","webpack://bitmovin-player-ui/./src/scss/components/settings/_select-box.scss","webpack://bitmovin-player-ui/./src/scss/components/seekbar/_seek-bar-label.scss","webpack://bitmovin-player-ui/./src/scss/components/seekbar/_volume-slider.scss","webpack://bitmovin-player-ui/./src/scss/components/overlays/_subtitle-overlay.scss","webpack://bitmovin-player-ui/./src/scss/components/overlays/_subtitle-overlay-cea608.scss","webpack://bitmovin-player-ui/./src/scss/components/buttons/_volume-control-button.scss","webpack://bitmovin-player-ui/./src/scss/components/buttons/_cast-toggle-button.scss","webpack://bitmovin-player-ui/./src/scss/components/overlays/_cast-status-overlay.scss","webpack://bitmovin-player-ui/./src/scss/components/overlays/_error-message-overlay.scss","webpack://bitmovin-player-ui/./src/scss/components/_title-bar.scss","webpack://bitmovin-player-ui/./src/scss/components/overlays/_recommendation-overlay.scss","webpack://bitmovin-player-ui/./src/scss/components/overlays/_click-to-dismiss-overlay.scss","webpack://bitmovin-player-ui/./src/scss/components/buttons/_huge-replay-button.scss","webpack://bitmovin-player-ui/./src/scss/components/buttons/_replay-button.scss","webpack://bitmovin-player-ui/./src/scss/components/labels/_playback-time-label.scss","webpack://bitmovin-player-ui/./src/scss/components/overlays/_buffering-overlay.scss","webpack://bitmovin-player-ui/./src/scss/components/overlays/_playback-toggle-overlay.scss","webpack://bitmovin-player-ui/./src/scss/components/buttons/_close-button.scss","webpack://bitmovin-player-ui/./src/scss/components/buttons/_airplay-toggle-button.scss","webpack://bitmovin-player-ui/./src/scss/components/buttons/_picture-in-picture-toggle-button.scss","webpack://bitmovin-player-ui/./src/scss/components/_spacer.scss","webpack://bitmovin-player-ui/./src/scss/components/settings/_settings-panel-navigation-text-button.scss","webpack://bitmovin-player-ui/./src/scss/components/settings/subtitlesettings/_subtitle-overlay-settings.scss","webpack://bitmovin-player-ui/./src/scss/components/buttons/_subtitle-list-box-toggle-button.scss","webpack://bitmovin-player-ui/./src/scss/components/buttons/_audio-track-list-box-toggle-button.scss","webpack://bitmovin-player-ui/./src/scss/components/overlays/_touch-control-overlay.scss","webpack://bitmovin-player-ui/./src/scss/components/buttons/_small-centered-playback-toggle-button.scss","webpack://bitmovin-player-ui/./src/scss/components/ads/_ad-skip-button.scss","webpack://bitmovin-player-ui/./src/scss/components/ads/_ad-status-overlay.scss","webpack://bitmovin-player-ui/./src/scss/components/ads/_ad-message-label.scss","webpack://bitmovin-player-ui/./src/scss/components/ads/_ad-control-bar.scss","webpack://bitmovin-player-ui/./src/scss/_ads.scss","webpack://bitmovin-player-ui/./src/scss/_cast-receiver.scss","webpack://bitmovin-player-ui/./src/scss/_small-screen.scss","webpack://bitmovin-player-ui/./src/scss/_tv.scss"],"sourcesContent":["$prefix: bmpui;\n@import 'variables';\n@import 'mixins';\n@import 'components/icon';\n@import 'components/component';\n@import 'components/container';\n@import 'components/uicontainer';\n@import 'components/control-bar';\n@import 'components/buttons/button';\n@import 'components/buttons/playback-toggle-button';\n@import 'components/buttons/quick-seek-button';\n@import 'components/buttons/fullscreen-toggle-button';\n@import 'components/buttons/vr-toggle-button';\n@import 'components/buttons/volume-toggle-button';\n@import 'components/buttons/eco-mode-toggle-button';\n@import 'components/seekbar/seek-bar';\n@import 'components/watermark';\n@import 'components/buttons/huge-playback-toggle-button';\n@import 'components/labels/label';\n@import 'components/settings/settings-panel';\n@import 'components/settings/settings-panel-page';\n@import 'components/settings/settings-panel-item';\n@import 'components/settings/settings-panel-page-open-button';\n@import 'components/settings/settings-panel-page-back-button';\n@import 'components/settings/settings-toggle-button';\n@import 'components/settings/select-box';\n@import 'components/seekbar/seek-bar-label';\n@import 'components/seekbar/volume-slider';\n@import 'components/overlays/subtitle-overlay';\n@import 'components/overlays/subtitle-overlay-cea608';\n@import 'components/buttons/volume-control-button';\n@import 'components/buttons/cast-toggle-button';\n@import 'components/overlays/cast-status-overlay';\n@import 'components/overlays/error-message-overlay';\n@import 'components/title-bar';\n@import 'components/overlays/recommendation-overlay';\n@import 'components/overlays/click-overlay';\n@import 'components/overlays/click-to-dismiss-overlay';\n@import 'components/buttons/huge-replay-button';\n@import 'components/buttons/replay-button';\n@import 'components/labels/playback-time-label';\n@import 'components/overlays/buffering-overlay';\n@import 'components/overlays/playback-toggle-overlay';\n@import 'components/buttons/close-button';\n@import 'components/buttons/airplay-toggle-button';\n@import 'components/buttons/picture-in-picture-toggle-button';\n@import 'components/spacer';\n@import 'components/settings/subtitlesettings/subtitle-settings';\n@import 'components/buttons/subtitle-list-box-toggle-button';\n@import 'components/buttons/audio-track-list-box-toggle-button';\n@import 'components/overlays/touch-control-overlay';\n@import 'components/buttons/small-centered-playback-toggle-button';\n@import 'ads';\n@import 'cast-receiver';\n@import 'small-screen';\n@import 'tv';\n\n// sass-lint:disable nesting-depth\n.#{$prefix}-ui-uicontainer {\n  color: $color-primary;\n  font-family: $font-family;\n  font-size: $font-size;\n  font-weight: $font-weight-medium;\n  line-height: 1;\n  text-align: left;\n  user-select: none;\n\n  &.#{$prefix}-player-state-idle {\n    .#{$prefix}-ui-controlbar,\n    .#{$prefix}-ui-titlebar,\n    .#{$prefix}-ui-hugeplaybacktogglebutton {\n      display: none;\n    }\n  }\n\n  &.#{$prefix}-player-state-finished {\n    .#{$prefix}-ui-titlebar,\n    .#{$prefix}-ui-controlbar,\n    .#{$prefix}-ui-hugeplaybacktogglebutton,\n    .#{$prefix}-ui-smallcenteredplaybacktogglebutton {\n      display: none;\n    }\n  }\n\n  .#{$prefix}-text-right {\n    text-align: right;\n  }\n\n  &.#{$prefix}-controls-shown {\n    .#{$prefix}-ui-touch-control-overlay {\n      background-color: $color-background-dimmed;\n    }\n  }\n\n  &.#{$prefix}-layout-max-width-400 {\n    .#{$prefix}-ui-volumeslider {\n      display: none;\n    }\n\n    .#{$prefix}-ui-recommendation-overlay {\n      .#{$prefix}-recommendations-section {\n        display: none;\n      }\n    }\n  }\n\n  // sass-lint:disable force-element-nesting\n  &.#{$prefix}-layout-max-width-400,\n  &.#{$prefix}-layout-max-width-600 {\n    // Hide the description in ultra tiny players to not clog the UI too much\n    .#{$prefix}-ui-titlebar .#{$prefix}-label-metadata-description {\n      display: none;\n    }\n\n    .#{$prefix}-ui-hugeplaybacktogglebutton,\n    .#{$prefix}-ui-smallcenteredplaybacktogglebutton,\n    .#{$prefix}-ui-watermark,\n    .#{$prefix}-ui-hugereplaybutton {\n      .#{$prefix}-ui-icon {\n        background-size: $icon-size-medium;\n      }\n    }\n\n    .#{$prefix}-ui-watermark {\n      margin: 0;\n    }\n\n    .#{$prefix}-ui-cast-status-overlay {\n      background-size: $icon-size-large;\n      background-position: center 40%;\n\n      .#{$prefix}-ui-cast-status-label {\n        top: 55%;\n      }\n    }\n\n    .#{$prefix}-ui-settings-panel {\n      left: max(1em, env(safe-area-inset-left, 0));\n      right: max(1em, env(safe-area-inset-right, 0));\n      margin-top: 2em;\n      max-height: calc(100% - 2em - 3.5em);\n      width: unset;\n    }\n  }\n\n  &.#{$prefix}-layout-max-width-800 {\n    .#{$prefix}-ui-settings-panel {\n      width: 50%;\n    }\n  }\n}\n","@import '../variables';\n\n@mixin ui-icon-container {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  flex-flow: row;\n  justify-content: flex-start;\n  column-gap: 0.4em;\n}\n\n.#{$prefix}-ui-icon {\n  display: inline-block;\n  background-color: transparent;\n  background-origin: content-box;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: $icon-size;\n  border: 0;\n  box-sizing: content-box;\n  cursor: pointer;\n  width: 100%;\n  height: $icon-size;\n  min-width: $icon-size;\n}\n","/**\n * CSS class prefix for all components\n *\n * See webpack.config.js on how to customize the prefix at build time\n */\n$prefix: 'bmpui' !default;\n\n$color-black: #000 !default;\n$color-transparent: rgba(0, 0, 0, 0) !default;\n$color-red: #f00 !default;\n\n/**\n * Accent color to highlight certain elements.\n */\n$color-highlight: #fff !default;\n/**\n * Primary text color\n */\n$color-primary: #fff !default;\n/**\n * Secondary text color\n */\n$color-secondary: #999 !default;\n/**\n * Background color for the UI in case the video is not visible\n */\n$color-background: #111 !default;\n/**\n * Used as gradient start color for text elements backgrounds and at the UI edges (top/bottom)\n */\n$color-background-gradient-start: transparentize($color-black, 0.3) !default;\n/**\n * Used as solid color for text element backgrounds\n */\n$color-background-text: rgba(20, 20, 20, 0.8);\n/**\n * Color for visualizing focus on elements\n */\n$color-focus: transparentize($color-highlight, 0.8) !default;\n\n/**\n * Background color for Settings Panel title rows\n */\n$color-background-menu-title-overlay: rgba(0, 0, 0, 0.25) !default;\n/**\n * Background color for menu elements\n */\n$color-background-menu: #2e2e2e !default;\n/**\n * Hover color for Settings Panel items\n */\n$color-background-menu-hover-overlay: rgba(255, 255, 255, 0.07) !default;\n/**\n * Background color for quick seek indicator\n */\n$color-background-seek-circle: rgba(255, 255, 255, 0.35) !default;\n/**\n * Background color for dimmed overlay effects\n */\n$color-background-dimmed: rgba(0, 0, 0, 0.5) !default;\n/**\n * Color for ad-related UI elements\n */\n$color-highlight-ads: #ffc737 !default;\n/**\n * Color for specific ad-related icons such as the skip button icon\n */\n$color-icon-highlight-ads: $color-highlight-ads !default;\n/**\n * Color for icons\n */\n$color-icon: $color-primary !default;\n\n/**\n * Base font family for all text elements\n */\n$font-family: sans-serif !default;\n/**\n * Base font size\n */\n$font-size: 1.125rem !default; /* 18px */\n/**\n * Large font size variant\n */\n$font-size-large: calc($font-size * 1.25) !default;\n/**\n * Small font size variant\n */\n$font-size-small: calc($font-size * 0.75) !default;\n\n/**\n * Base icon size\n */\n$icon-size: calc($font-size * 4 / 3) !default; /* 24px */\n/**\n * Medium icon size\n */\n$icon-size-medium: calc($icon-size * 2) !default;\n/**\n * Large icon size\n */\n$icon-size-large: calc($icon-size * 3) !default;\n\n/**\n * Normal font weight\n */\n$font-weight: normal !default; /* 400 */\n/**\n * Medium font weight\n */\n$font-weight-medium: 500 !default;\n/**\n * Semi-bold font weight\n */\n$font-weight-semi-bold: 600 !default;\n/**\n * Bold font weight\n */\n$font-weight-bold: 700 !default;\n\n/**\n * Default border radius for UI elements\n */\n$border-radius: 0.4rem !default;\n\n/**\n * Text color for subtitles\n */\n$subtitle-text-color: #fff !default;\n/**\n * Border color for subtitle text outlines\n */\n$subtitle-text-border-color: #000 !default;\n\n/**\n * Default animation duration\n */\n$animation-duration: 0.3s !default;\n/**\n * Short animation duration\n */\n$animation-duration-short: $animation-duration * 0.5 !default;\n","@import '../variables';\n\n%ui-component {\n  /*! placeholder to avoid removal of empty selector */\n  //outline: 1px solid red;\n  outline: 0;\n}\n\n.#{$prefix}-ui-component {\n  @extend %ui-component;\n}\n","@import '../variables';\n@import '../mixins';\n\n.#{$prefix}-ui-uicontainer {\n  @extend %ui-container;\n\n  @include layout-cover;\n\n  overflow: hidden;\n  pointer-events: none; // Do not catch pointer events, pass them through\n\n  * {\n    pointer-events: auto;\n  }\n\n  &.#{$prefix}-hidden {\n    // Most hiding within the UI works through the \"visibility\" property, because \"display\" cannot be animated.\n    // For the outermost UI container we use \"display\" though, to not block any events (e.g. click events) on the video\n    // when the UI is hidden.\n    display: none;\n  }\n\n  // sass-lint:disable force-element-nesting\n  &.#{$prefix}-player-state-playing.#{$prefix}-controls-hidden {\n    // Hide cursor while the controls are hidden\n    * {\n      cursor: none;\n    }\n  }\n\n  // sass-lint:disable nesting-depth\n  &.#{$prefix}-controls-shown {\n    .#{$prefix}-ui-hugeplaybacktogglebutton {\n      &:focus {\n        box-shadow: inset -4px -3px 10px 10px transparentize($color-highlight, 0.4);\n\n        &:not(.#{$prefix}-focus-visible) {\n          box-shadow: none;\n        }\n      }\n    }\n  }\n}\n","@import 'variables';\n\n@function hidden-animated-transition($duration) {\n  @return opacity $duration, visibility 0s;\n}\n\n@mixin hidden {\n  &.#{$prefix}-hidden {\n    display: none;\n  }\n}\n\n@mixin hidden-animated($duration: $animation-duration) {\n  opacity: 1;\n  transition: hidden-animated-transition($duration);\n  visibility: visible;\n\n  &.#{$prefix}-hidden {\n    opacity: 0;\n    transition:\n      opacity $duration,\n      visibility $duration;\n    visibility: hidden;\n  }\n}\n\n@mixin hidden-animated-focusable($duration: $animation-duration) {\n  opacity: 1;\n  transition: hidden-animated-transition($duration);\n\n  &.#{$prefix}-hidden {\n    opacity: 0;\n    transition: opacity $duration;\n  }\n}\n\n/*\n * this will use the existing `hidden-animated` mixin and add additional transitions properties\n *\n * Example:\n * @include hidden-animated-with-additional-transitions($animation-duration,\n *         (\n *                 height: (.35s, cubic-bezier(.4, 0, .2, 1)),\n *                 width: (.35s, cubic-bezier(.4, 0, .2, 1))\n *         )\n * );\n */\n@mixin hidden-animated-with-additional-transitions($duration: $animation-duration, $transitions: ()) {\n  $transitions-string: hidden-animated-transition($duration);\n  @each $property, $property-options in $transitions {\n    $property-settings: $property;\n    @each $option in $property-options {\n      $property-settings: $property-settings $option;\n    }\n    $transitions-string: $transitions-string, $property-settings;\n  }\n\n  @include hidden-animated($duration);\n  transition: $transitions-string;\n}\n\n// Cover the whole parent element\n@mixin layout-cover {\n  height: 100%;\n  left: 0;\n  margin: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n\n// Align to parent's bottom\n@mixin layout-align-bottom {\n  bottom: 0;\n  position: absolute;\n  width: 100%;\n}\n\n// Align to parent's top\n@mixin layout-align-top {\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n\n@function safe-area-inset($edge) {\n  @return env(safe-area-inset-#{$edge}, 0);\n}\n\n@function safe-area-max($value, $edge) {\n  @return max($value, safe-area-inset($edge));\n}\n\n@mixin animate-slide-in-from-bottom($max-height, $duration: $animation-duration, $inner-selector: '') {\n  // Animate show\n  & #{$inner-selector} {\n    max-height: $max-height;\n    transition: max-height $duration ease-in;\n  }\n\n  // Animate hide\n  // sass-lint:disable force-element-nesting\n  &.#{$prefix}-hidden #{$inner-selector} {\n    max-height: 0;\n    transition: max-height $duration ease-out;\n  }\n}\n\n@mixin text-border($color: $color-primary) {\n  // Shift shadow in all 8 directions to get a homogeneous stroke around the text (works only for 1px width)\n  text-shadow:\n    -1px -1px 0 $color,\n    0 -1px 0 $color,\n    1px -1px 0 $color,\n    -1px 0 0 $color,\n    1px 0 0 $color,\n    -1px 1px 0 $color,\n    0 1px 0 $color,\n    1px 1px 0 $color;\n}\n\n@mixin svg-icon-shadow {\n  filter: drop-shadow(0 0 0.25px $color-primary);\n}\n\n// Use this mixin in `&:after` or `:before` to increase the hit area without increasing the visible size\n@mixin invisible-hit-area($top, $right, $bottom, $left) {\n  content: '';\n  position: absolute;\n  display: block;\n  top: $top;\n  right: $right;\n  bottom: $bottom;\n  left: $left;\n}\n\n@mixin seekbar-position-marker($marker-dimension) {\n  height: $marker-dimension;\n  left: -$marker-dimension * 0.5;\n  width: $marker-dimension;\n  &:after {\n    $inset: calc(-1 * $font-size / 3);\n    @include invisible-hit-area($inset, $inset, $inset, $inset);\n    border-radius: 100%;\n    // Uncomment to expose hit area for debugging\n    // background-color: rgba(red, 0.5);\n  }\n}\n\n@mixin focusable($inset: false, $border-radius: 0.3em, $focus-element-box-shadow: 0 0 0 0.1em rgba($color-focus, 0.4)) {\n  &:focus {\n    outline: none;\n  }\n\n  &.#{$prefix}-focus-visible {\n    @if $inset == false {\n      box-shadow: $focus-element-box-shadow;\n    } @else {\n      box-shadow: inset $focus-element-box-shadow;\n    }\n\n    background-color: $color-focus;\n    backdrop-filter: blur(5px);\n    border-radius: $border-radius;\n    outline: none;\n  }\n}\n\n/// Creates a gradient background from transparent to the gradient start color\n/// @param {String} $direction - Direction of the gradient (e.g., 'to bottom', 'to top')\n/// @param {Color} $start-color ($color-background-gradient-start) - The color to gradient to\n@mixin background-gradient($direction, $start-color: $color-background-gradient-start) {\n  background: linear-gradient($direction, $color-transparent, $start-color);\n}\n\n/// Replace `$search` with `$replace` in `$string`. From https://css-tricks.com/snippets/sass/str-replace-function/\n/// @param {String} $string - Initial string\n/// @param {String} $search - Substring to replace\n/// @param {String} $replace ('') - New value\n/// @return {String} - Updated string\n@function str-replace($string, $search, $replace: '') {\n  $index: str-index($string, $search);\n\n  @if $index {\n    @return str-slice($string, 1, $index - 1) + $replace +\n      str-replace(str-slice($string, $index + str-length($search)), $search, $replace);\n  }\n\n  @return $string;\n}\n","@import '../variables';\n@import '../mixins';\n\n.#{$prefix}-ui-controlbar {\n  @extend %ui-container;\n\n  @include hidden-animated-focusable;\n  @include layout-align-bottom;\n  @include background-gradient(to bottom);\n\n  box-sizing: border-box;\n\n  $controlbar-padding: 1em;\n  padding: $controlbar-padding safe-area-max($controlbar-padding, right) safe-area-max($controlbar-padding, bottom)\n    safe-area-max($controlbar-padding, left);\n\n  .#{$prefix}-container-wrapper {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .#{$prefix}-controlbar-top,\n  .#{$prefix}-controlbar-bottom {\n    > .#{$prefix}-container-wrapper {\n      display: flex;\n      flex-direction: row;\n      column-gap: 0.3rem;\n      align-items: center;\n    }\n  }\n\n  .#{$prefix}-controlbar-top {\n    > .#{$prefix}-container-wrapper {\n      column-gap: $font-size;\n      margin: 0 0.5em;\n    }\n  }\n\n  .#{$prefix}-controlbar-bottom {\n    // We can't use the row-gap property here because the AdControlBar collapses certain elements which\n    // would result in additional margins.\n    margin-top: 0.5em;\n\n    > .#{$prefix}-container-wrapper {\n      .#{$prefix}-ui-volumeslider {\n        margin: auto 0.5em;\n        width: 8rem;\n      }\n    }\n  }\n}\n","@import '../../variables';\n\n%ui-button {\n  @extend %ui-component;\n\n  @include ui-icon-container;\n\n  background-color: transparent;\n  border: 0;\n  box-sizing: content-box;\n  cursor: pointer;\n  height: $icon-size;\n  font-size: $font-size; // Explicitly needed on iOS to ensure icon fonts are sized correctly\n  min-width: $icon-size;\n  padding: calc($icon-size * 0.25);\n  transition: transform 0.15s ease;\n  // sass-lint:disable no-vendor-prefixes\n  -webkit-tap-highlight-color: transparent;\n\n  .#{$prefix}-label {\n    color: $color-primary;\n  }\n\n  &.#{$prefix}-disabled {\n    cursor: default;\n\n    &,\n    > * {\n      pointer-events: none;\n    }\n\n    .#{$prefix}-label {\n      &:hover {\n        text-decoration: none;\n      }\n    }\n  }\n\n  &.touched {\n    transform: scale(0.8);\n  }\n\n  @include hidden;\n  @include focusable;\n}\n\n.#{$prefix}-ui-button {\n  @extend %ui-button;\n}\n","@import '../../variables';\n@import '../../mixins';\n\n.#{$prefix}-ui-playbacktogglebutton {\n  @extend %ui-button;\n\n  .#{$prefix}-ui-icon {\n    background-image: svg-load('../../assets/images/play.svg', fill=$color-icon);\n  }\n\n  &:hover {\n    @include svg-icon-shadow;\n  }\n\n  &.#{$prefix}-on {\n    .#{$prefix}-ui-icon {\n      background-image: svg-load('../../assets/images/pause.svg', fill=$color-icon);\n    }\n\n    &.#{$prefix}-stoptoggle {\n      .#{$prefix}-ui-icon {\n        background-image: svg-load('../../assets/images/stop.svg', fill=$color-icon);\n      }\n    }\n  }\n}\n","@import '../../variables';\n@import '../../mixins';\n\n.#{$prefix}-ui-quickseekbutton {\n  @extend %ui-button;\n\n  &:hover {\n    @include svg-icon-shadow;\n  }\n\n  $seek-durations: 5, 10, 15, 20, 30, 60;\n\n  &[data-#{$prefix}-seek-direction='forward'] {\n    .#{$prefix}-ui-icon {\n      background-image: svg-load('../../assets/images/quickseek-forward.svg', fill=$color-icon);\n    }\n\n    @each $duration in $seek-durations {\n      &[data-#{$prefix}-seek-seconds='#{$duration}'] {\n        .#{$prefix}-ui-icon {\n          background-image: svg-load('../../assets/images/quickseek-forward-#{$duration}.svg', fill=$color-icon);\n        }\n      }\n    }\n  }\n\n  &[data-#{$prefix}-seek-direction='rewind'] {\n    .#{$prefix}-ui-icon {\n      background-image: svg-load('../../assets/images/quickseek-back.svg', fill=$color-icon);\n    }\n\n    @each $duration in $seek-durations {\n      &[data-#{$prefix}-seek-seconds='#{$duration}'] {\n        .#{$prefix}-ui-icon {\n          background-image: svg-load('../../assets/images/quickseek-back-#{$duration}.svg', fill=$color-icon);\n        }\n      }\n    }\n  }\n}\n","@import '../../variables';\n@import '../../mixins';\n\n.#{$prefix}-ui-fullscreentogglebutton {\n  @extend %ui-button;\n\n  .#{$prefix}-ui-icon {\n    background-image: svg-load('../../assets/images/fullscreen.svg', fill=$color-icon);\n  }\n\n  &:hover {\n    @include svg-icon-shadow;\n  }\n\n  &.#{$prefix}-on {\n    .#{$prefix}-ui-icon {\n      background-image: svg-load('../../assets/images/fullscreenX.svg', fill=$color-icon);\n    }\n  }\n}\n","@import '../../variables';\n@import '../../mixins';\n\n.#{$prefix}-ui-vrtogglebutton {\n  @extend %ui-button;\n\n  // svg() usage: http://pavliko.github.io/postcss-svg/\n  .#{$prefix}-ui-icon {\n    background-image: svg-load('../../assets/images/glasses.svg', fill=$color-icon);\n  }\n\n  &:hover {\n    @include svg-icon-shadow;\n  }\n}\n","@import '../../variables';\n@import '../../mixins';\n\n.#{$prefix}-ui-volumetogglebutton {\n  @extend %ui-button;\n\n  &:hover {\n    @include svg-icon-shadow;\n  }\n\n  &.#{$prefix}-muted {\n    .#{$prefix}-ui-icon {\n      background-image: svg-load('../../assets/images/volume-mute.svg', fill=$color-icon);\n    }\n  }\n\n  &.#{$prefix}-unmuted {\n    &[data-#{$prefix}-volume-level-tens='0'] {\n      .#{$prefix}-ui-icon {\n        background-image: svg-load('../../assets/images/volume-mute.svg', fill=$color-icon);\n      }\n    }\n\n    &[data-#{$prefix}-volume-level-tens='1'],\n    &[data-#{$prefix}-volume-level-tens='2'],\n    &[data-#{$prefix}-volume-level-tens='3'],\n    &[data-#{$prefix}-volume-level-tens='4'],\n    &[data-#{$prefix}-volume-level-tens='5'] {\n      .#{$prefix}-ui-icon {\n        background-image: svg-load('../../assets/images/volume-low.svg', fill=$color-icon);\n      }\n    }\n\n    &[data-#{$prefix}-volume-level-tens='6'],\n    &[data-#{$prefix}-volume-level-tens='7'],\n    &[data-#{$prefix}-volume-level-tens='8'],\n    &[data-#{$prefix}-volume-level-tens='9'],\n    &[data-#{$prefix}-volume-level-tens='10'] {\n      .#{$prefix}-ui-icon {\n        background-image: svg-load('../../assets/images/volume.svg', fill=$color-icon);\n      }\n    }\n  }\n}\n","@import '../../variables';\n@import '../../mixins';\n\n.#{$prefix}-ui-ecomodetogglebutton {\n  @extend %ui-button;\n  height: 1em;\n  min-width: 5em;\n\n  &:hover {\n    @include svg-icon-shadow;\n  }\n\n  &.#{$prefix}-on {\n    .#{$prefix}-ui-icon {\n      background-image: svg-load('../../assets/images/toggleOn.svg', fill=$color-icon);\n      background-position: 20px center;\n      background-size: 45% auto;\n      margin-left: 2%;\n    }\n  }\n\n  &.#{$prefix}-off {\n    .#{$prefix}-ui-icon {\n      background-image: svg-load('../../assets/images/toggleOff.svg', stroke=$color-icon);\n      background-position: 20px center;\n      background-size: 45% auto;\n    }\n  }\n}\n\n// sass-lint:disable no-ids\n#ecomodelabel {\n  &::before {\n    background-image: svg-load('../../assets/images/leaf.svg', fill=$color-icon);\n    background-repeat: no-repeat;\n    background-size: 1.7em auto;\n    content: ' ';\n    display: inline-block;\n    height: 1.5em;\n    width: 2em;\n  }\n}\n","@import '../../variables';\n@import '../../mixins';\n\n// Defines the height of the bars within the seekbar container\n$seekbar-bar-height: calc($font-size / 3);\n\n// sass-lint:disable no-vendor-prefixes\n%bar {\n  -webkit-transform-origin: 0 0; // required for Android 4.4 WebView\n  bottom: 0;\n  box-sizing: border-box;\n  height: $seekbar-bar-height;\n  left: 0;\n  margin: auto;\n  position: absolute;\n  right: auto;\n  top: 0;\n  transform-origin: 0 0;\n  width: 100%;\n}\n\n%ui-seekbar {\n  @extend %ui-component;\n\n  @include hidden;\n  @include focusable;\n\n  display: flex;\n  align-items: center;\n  height: $font-size;\n  position: relative;\n  width: 100%;\n\n  $bar-inset: auto;\n\n  .#{$prefix}-seekbar-playbackposition-marker {\n    @extend %bar;\n\n    @include seekbar-position-marker($seekbar-bar-height * 3);\n    background-color: $color-highlight;\n    border-radius: 50%;\n    box-shadow: 0 0 3px 0 transparentize($color: #000, $amount: 0.75);\n  }\n\n  .#{$prefix}-seekbar {\n    @extend %ui-component;\n\n    @include hidden;\n    @include focusable;\n\n    cursor: pointer;\n    height: $seekbar-bar-height;\n    $vertical-margin: calc((1rem - $seekbar-bar-height) / 2);\n    margin: $vertical-margin auto;\n    position: relative;\n    // Reduce width to leave some padding for the focus indicator on the left and right side\n    width: calc(100% - 0.5rem);\n\n    &:after {\n      @include invisible-hit-area(-$vertical-margin, 0, -$vertical-margin, 0);\n      // Uncomment to expose hit area for debugging\n      // background-color: rgba(lime, 0.5);\n    }\n\n    .#{$prefix}-seekbar-bars {\n      @extend %bar;\n      border-radius: 25px;\n      overflow: hidden;\n    }\n\n    .#{$prefix}-seekbar-backdrop {\n      @extend %bar;\n      background-color: transparentize($color-primary, 0.8);\n      margin: $bar-inset 0;\n      width: 100%;\n    }\n\n    .#{$prefix}-seekbar-bufferlevel {\n      @extend %bar;\n      background-color: transparentize($color-primary, 0.8);\n      margin: $bar-inset 0;\n      transition:\n        0.3s linear,\n        0.3s linear;\n      transition-property: transform;\n    }\n\n    .#{$prefix}-seekbar-seekposition {\n      @extend %bar;\n      background-color: transparentize($color-primary, 0.8);\n      margin: $bar-inset 0;\n    }\n\n    .#{$prefix}-seekbar-playbackposition {\n      @extend %bar;\n      background-color: $color-highlight;\n      margin: $bar-inset 0;\n      transition:\n        0.1s linear,\n        0.1s linear;\n      transition-property: transform;\n    }\n\n    .#{$prefix}-seekbar-markers {\n      @extend %bar;\n\n      // Marker width is 2/3 of the seekbar height\n      $marker-width: calc($seekbar-bar-height * (2 / 3));\n      // Marker indicator is 5/3 of the seekbar height to extend the indicator above and below the seekbar by 1/3\n      // of the seekbar height\n      $marker-indicator-height: calc($seekbar-bar-height * (5 / 3));\n      $marker-indicator-border-radius: 0.125em;\n\n      height: $seekbar-bar-height;\n\n      > .#{$prefix}-seekbar-marker {\n        @extend %bar;\n\n        background-color: $color-primary;\n        height: 100%;\n        text-align: center;\n        transition-duration: 0.1s;\n        transition-property: transform;\n        transition-timing-function: linear;\n        width: $marker-width;\n\n        transition:\n          height 0.3s ease,\n          border-radius 0.3s ease,\n          transform 0.1s linear;\n\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n\n        &:hover,\n        &.#{$prefix}-hovered {\n          height: $marker-indicator-height;\n          border-radius: $marker-indicator-border-radius;\n        }\n\n        > .#{$prefix}-seekbar-marker-image {\n          height: $seekbar-bar-height * 4;\n          position: absolute;\n          transform: translate(-50%, calc(-100% - 0.2rem));\n        }\n\n        > .#{$prefix}-seekbar-marker-indicator {\n          height: $marker-indicator-height;\n          width: $marker-width;\n          background-color: $color-primary;\n          border-radius: $marker-indicator-border-radius;\n        }\n      }\n    }\n  }\n\n  // disable animations during seeks\n  &.#{$prefix}-seeking {\n    .#{$prefix}-seekbar {\n      .#{$prefix}-seekbar-bufferlevel,\n      .#{$prefix}-seekbar-playbackposition {\n        transition: none;\n      }\n    }\n  }\n}\n\n.#{$prefix}-ui-seekbar {\n  @extend %ui-seekbar;\n}\n","@import '../variables';\n\n.#{$prefix}-ui-watermark {\n  @extend %ui-button;\n\n  $watermark-size: $icon-size-large;\n\n  height: $watermark-size;\n  width: $watermark-size;\n  margin: 2em;\n  opacity: 0.8;\n  position: absolute;\n  right: 0;\n  top: 0;\n\n  .#{$prefix}-ui-icon {\n    background-size: initial;\n    background-image: svg-load('../../assets/images/logo.svg', fill=$color-icon);\n    height: $watermark-size;\n    width: $watermark-size;\n  }\n\n  &:hover {\n    opacity: 1;\n  }\n}\n","@import '../../variables';\n\n.#{$prefix}-ui-hugeplaybacktogglebutton {\n  @extend %ui-button;\n\n  @keyframes #{$prefix}-fade-out {\n    from {\n      opacity: 1;\n      visibility: visible;\n    }\n\n    to {\n      opacity: 0;\n      transform: scale(2);\n      visibility: hidden;\n    }\n  }\n\n  @keyframes #{$prefix}-fade-in {\n    from {\n      opacity: 0;\n      transform: scale(2);\n      visibility: visible;\n    }\n\n    to {\n      opacity: 1;\n    }\n  }\n\n  @keyframes #{$prefix}-breathe {\n    30% {\n      transform: scale(1.1);\n    }\n\n    60% {\n      transform: scale(1);\n    }\n  }\n\n  cursor: default;\n  height: 8em;\n  outline: none;\n  overflow: hidden; // hide overflow from scale animation\n  width: 8em;\n\n  .#{$prefix}-ui-icon {\n    background-image: svg-load('../../assets/images/play.svg', fill=$color-icon);\n    background-size: $icon-size-large;\n    height: 100%;\n    width: 100%;\n\n    &:hover {\n      animation: #{$prefix}-breathe 3s ease-in-out infinite;\n    }\n  }\n\n  &.#{$prefix}-on {\n    .#{$prefix}-ui-icon {\n      animation: #{$prefix}-fade-out $animation-duration cubic-bezier(0.55, 0.055, 0.675, 0.19); // http://easings.net/de#easeInCubic\n      transition: visibility 0s $animation-duration;\n      visibility: hidden;\n    }\n  }\n\n  &.#{$prefix}-off {\n    .#{$prefix}-ui-icon {\n      animation: #{$prefix}-fade-in $animation-duration cubic-bezier(0.55, 0.055, 0.675, 0.19); // http://easings.net/de#easeInCubic\n      visibility: visible;\n    }\n  }\n\n  &.#{$prefix}-no-transition-animations {\n    &.#{$prefix}-on,\n    &.#{$prefix}-off {\n      .#{$prefix}-ui-icon {\n        animation: none;\n        transition: none;\n      }\n    }\n  }\n\n  &:focus {\n    border-radius: unset;\n    background-color: unset;\n    backdrop-filter: none;\n  }\n\n  &:active {\n    transform: unset;\n  }\n}\n","@import '../../variables';\n\n%ui-label {\n  @extend %ui-component;\n  @include hidden;\n  @include ui-icon-container;\n\n  margin: 0;\n  // sass-lint:disable no-vendor-prefixes\n  -webkit-tap-highlight-color: transparent;\n\n  .#{$prefix}-ui-label-text {\n    margin: 0;\n    white-space: nowrap;\n    // sass-lint:disable no-vendor-prefixes\n    -webkit-tap-highlight-color: transparent;\n  }\n}\n\n.#{$prefix}-ui-label {\n  @extend %ui-label;\n}\n\n.#{$prefix}-ui-label-savedEnergy {\n  @extend %ui-label;\n  color: $color-highlight;\n  margin-left: 2.2em;\n}\n","@import '../../variables';\n@import '../../mixins';\n\n%ui-settings-panel {\n  @extend %ui-container;\n\n  @include hidden-animated-with-additional-transitions(\n    $animation-duration,\n    (\n      height: (\n        0.35s,\n        cubic-bezier(0.4, 0, 0.2, 1),\n      ),\n      width: (\n        0.35s,\n        cubic-bezier(0.4, 0, 0.2, 1),\n      ),\n    )\n  );\n\n  $background-color: transparentize($color-background-menu, 0.15);\n\n  backdrop-filter: blur(10px);\n  background-color: $background-color;\n  border-radius: $border-radius;\n  bottom: 3.5em;\n  box-shadow: 0 0 3px 0 transparentize($color: #000, $amount: 0.75);\n  height: fit-content;\n  max-height: 60%;\n  min-width: fit-content;\n  overflow: hidden;\n  overflow-y: auto;\n  padding: 0;\n  position: absolute;\n  right: max(1em, env(safe-area-inset-right, 0));\n  width: 40%;\n\n  > .#{$prefix}-container-wrapper {\n    overflow-y: auto;\n  }\n}\n\n.#{$prefix}-ui-settings-panel {\n  @extend %ui-settings-panel;\n}\n\n// Remove margin inherited from controlbar\n.#{$prefix}-container-wrapper > .#{$prefix}-ui-settings-panel {\n  margin: 0;\n}\n","@import '../../variables';\n\n%ui-settings-panel-page {\n  display: none;\n\n  &.#{$prefix}-active {\n    display: block;\n  }\n}\n\n.#{$prefix}-ui-settings-panel-page {\n  @extend %ui-settings-panel-page;\n}\n","@import '../../variables';\n\n%ui-settings-panel-item {\n  @include focusable(true, 0, 0);\n\n  padding: 1rem;\n  white-space: nowrap;\n\n  cursor: pointer;\n\n  * {\n    cursor: pointer;\n  }\n\n  @media (hover: hover) {\n    &:hover {\n      background-color: $color-background-menu-hover-overlay;\n    }\n  }\n\n  &:active {\n    background-color: $color-background-menu-hover-overlay;\n  }\n\n  &.#{$prefix}-hidden {\n    display: none;\n  }\n\n  .#{$prefix}-container-wrapper {\n    align-items: center;\n    display: flex;\n  }\n\n  > .#{$prefix}-container-wrapper {\n    column-gap: 10px;\n  }\n\n  .#{$prefix}-ui-label {\n    line-height: $icon-size;\n    min-height: $icon-size;\n  }\n\n  .#{$prefix}-ui-label-setting-selected-option {\n    align-self: center;\n    margin-left: auto;\n    width: fit-content;\n\n    .#{$prefix}-ui-icon {\n      background-image: svg-load('../../assets/images/angle-right.svg', stroke=$color-icon);\n      width: 0.8em;\n      min-width: unset;\n    }\n  }\n\n  &.#{$prefix}-ui-settings-panel-item-select-option {\n    .#{$prefix}-ui-icon {\n      display: none;\n    }\n\n    &.#{$prefix}-selected {\n      .#{$prefix}-ui-icon {\n        display: inline-block;\n        background-image: svg-load('../../assets/images/check.svg', stroke=$color-icon);\n      }\n    }\n  }\n\n  &.#{$prefix}-title-item {\n    background-color: $color-background-menu-title-overlay;\n    font-weight: $font-weight-medium;\n\n    &:hover {\n      background-color: $color-background-menu-hover-overlay;\n    }\n  }\n}\n\n.#{$prefix}-ui-settings-panel-item {\n  @extend %ui-settings-panel-item;\n}\n","@import '../../variables';\n@import '../../mixins';\n\n%ui-settingspanelpageopenbutton {\n  @extend %ui-button;\n\n  .#{$prefix}-ui-icon {\n    background-image: svg-load('../../assets/images/settings.svg', fill=$color-icon);\n    max-height: 0.8em;\n  }\n\n  &:hover {\n    @include svg-icon-shadow;\n  }\n\n  &.#{$prefix}-on {\n    .#{$prefix}-ui-icon {\n      transform: rotate(30deg);\n    }\n  }\n}\n\n.#{$prefix}-ui-settingspanelpageopenbutton {\n  @extend %ui-settingspanelpageopenbutton;\n}\n","@import '../../variables';\n\n%ui-settingspanelpagebackbutton {\n  @extend %ui-button;\n\n  border-collapse: collapse;\n  padding: unset;\n  flex: 1;\n  text-align: left;\n  column-gap: 0.4em;\n  min-width: unset;\n\n  &.touched {\n    transform: unset;\n  }\n\n  .#{$prefix}-ui-icon {\n    width: 0.8em;\n    min-width: unset;\n    background-image: svg-load('../../assets/images/angle-left.svg', stroke=$color-icon);\n  }\n\n  .#{$prefix}-label {\n    display: inline-block;\n    margin: 0;\n  }\n}\n\n.#{$prefix}-ui-settingspanelpagebackbutton {\n  @extend %ui-settingspanelpagebackbutton;\n}\n","@import '../../variables';\n@import '../../mixins';\n\n%ui-settingstogglebutton {\n  @extend %ui-button;\n\n  &:hover {\n    @include svg-icon-shadow;\n  }\n}\n\n.#{$prefix}-ui-settingstogglebutton {\n  @extend %ui-settingstogglebutton;\n\n  .#{$prefix}-ui-icon {\n    background-image: svg-load('../../assets/images/settings.svg', fill=$color-icon);\n    transition: transform $animation-duration-short;\n  }\n\n  &.#{$prefix}-on {\n    .#{$prefix}-ui-icon {\n      transform: rotate(30deg);\n    }\n  }\n}\n","@import '../../variables';\n@import '../../mixins';\n\n.#{$prefix}-ui-selectbox {\n  @extend %ui-component;\n\n  @include focusable;\n\n  background-color: transparent;\n  border: 0;\n  color: $color-highlight;\n  cursor: pointer;\n  padding: 0.3em;\n\n  option {\n    color: $color-secondary;\n\n    &:checked {\n      color: $color-highlight;\n    }\n  }\n}\n","@import '../../variables';\n\n.#{$prefix}-ui-seekbar-label {\n  @extend %ui-container;\n\n  @include hidden-animated;\n\n  bottom: 100%;\n  left: 0;\n  margin-bottom: 0.2em;\n  pointer-events: none;\n  position: absolute;\n  text-align: center;\n\n  // Center container on left edge to get it centered over timeline position\n  %center-on-left-edge {\n    margin-left: -50%;\n    margin-right: 50%;\n    position: relative;\n  }\n\n  > .#{$prefix}-container-wrapper {\n    @extend %center-on-left-edge;\n\n    padding-left: 1em;\n    padding-right: 1em;\n  }\n\n  .#{$prefix}-seekbar-label-inner {\n    overflow: hidden;\n\n    > .#{$prefix}-container-wrapper {\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      // sass-lint:disable no-misspelled-properties\n      row-gap: 0.5em;\n\n      .#{$prefix}-seekbar-thumbnail {\n        width: 7em;\n        border: solid $color-primary 0.0625em;\n        border-radius: $border-radius;\n      }\n\n      .#{$prefix}-seekbar-label-metadata {\n        background-color: $color-background-text;\n        bottom: 0;\n        box-sizing: border-box;\n        display: inline-block;\n        padding: 0.3em 0.5em;\n        width: fit-content;\n        border-radius: $border-radius;\n      }\n\n      .#{$prefix}-seekbar-label-time {\n        display: block;\n      }\n\n      .#{$prefix}-seekbar-label-title {\n        @include hidden;\n\n        display: block;\n        white-space: normal;\n      }\n    }\n  }\n}\n","@import '../../variables';\n@import '../../mixins';\n@import 'seek-bar';\n\n.#{$prefix}-ui-volumeslider {\n  @extend %ui-seekbar;\n\n  min-width: 50px;\n\n  .#{$prefix}-seekbar-playbackposition-marker {\n    @include seekbar-position-marker($seekbar-bar-height * 3 - 0.25rem);\n    background-color: $color-highlight;\n    border: 0;\n  }\n\n  .#{$prefix}-seekbar {\n    .#{$prefix}-seekbar-bufferlevel {\n      display: none;\n    }\n  }\n}\n","@import '../../variables';\n@import '../../mixins';\n\n.#{$prefix}-ui-uicontainer {\n  .#{$prefix}-ui-subtitle-overlay {\n    @extend %ui-container;\n\n    @include hidden;\n\n    bottom: env(safe-area-inset-bottom, 0);\n    left: env(safe-area-inset-left, 0);\n    pointer-events: none;\n    position: absolute;\n    right: env(safe-area-inset-right, 0);\n    text-align: center;\n    top: env(safe-area-inset-top, 0);\n    transition: bottom $animation-duration-short ease-out;\n\n    * {\n      // This aims to prevent possibly conflicting style definitions inherited\n      // from target applications which can break subtitles styling. It's still possible\n      // to override this with selector of higher priority score.\n      all: unset;\n    }\n\n    p {\n      // It may happen that we render <p> inside of an <span> and the `all: unset;` reseting above sets\n      // p to inherit the inline display instead of its default display block so this sets it back.\n      display: block;\n    }\n\n    .#{$prefix}-subtitle-region-container {\n      position: absolute;\n\n      &.#{$prefix}-subtitle-position-default {\n        bottom: 2em;\n        left: 3em;\n        right: 3em;\n        top: initial;\n      }\n\n      &.#{$prefix}-subtitle-position-bottom > div {\n        bottom: 0;\n        position: absolute;\n        width: 100%;\n      }\n    }\n\n    .#{$prefix}-ui-subtitle-label {\n      @include text-border($subtitle-text-border-color);\n\n      color: $subtitle-text-color;\n      height: fit-content;\n\n      // Break labels into separate lines\n      // sass-lint:disable force-pseudo-nesting\n      &:nth-child(1n-1)::after {\n        content: '\\A';\n        // VTT flex styling can increase this elements height, making the background larger\n        height: 0;\n        white-space: pre-line;\n        width: 0;\n      }\n    }\n\n    // Move the subtitle up above the controlbar when it appears to avoid them overlapping\n    &.#{$prefix}-controlbar-visible {\n      bottom: 5em;\n      transition: bottom $animation-duration-short ease-in;\n    }\n  }\n}\n","@use 'sass:math';\n\n.#{$prefix}-ui-subtitle-overlay {\n  --cea608-row-height: math.div(100%, 15);\n\n  &.#{$prefix}-cea608 {\n    bottom: 2em;\n    left: 3em;\n    right: 3em;\n    top: 2em;\n\n    .#{$prefix}-subtitle-region-container {\n      height: var(--cea608-row-height);\n      left: 0;\n      line-height: 1;\n      right: 0;\n      text-align: left;\n\n      // Define positions for all 15 rows\n      @for $i from 0 through 14 {\n        &.#{$prefix}-subtitle-position-cea608-row-#{$i} {\n          top: calc(var(--cea608-row-height) * #{$i});\n        }\n      }\n    }\n\n    .#{$prefix}-ui-subtitle-label {\n      display: inline-block;\n      font-family: 'Courier New', Courier, 'Nimbus Mono L', 'Cutive Mono', monospace;\n      position: absolute;\n      text-transform: uppercase;\n      white-space: nowrap;\n\n      // center vertically\n      top: 50%;\n      transform: translateY(-50%);\n\n      // sass-lint:disable force-pseudo-nesting nesting-depth\n      &:nth-child(1n-1)::after {\n        content: normal;\n        white-space: normal;\n      }\n    }\n  }\n}\n","@import '../../variables';\n@import '../../mixins';\n\n.#{$prefix}-ui-volumecontrolbutton {\n  @extend %ui-container;\n\n  line-height: 0; // Fix layout for Firefox: removes spurious space in the container\n  position: relative;\n\n  .#{$prefix}-ui-volumeslider {\n    @include animate-slide-in-from-bottom(6em, $animation-duration-short);\n\n    background-color: $color-background;\n    bottom: 100%;\n    height: 6em;\n    position: absolute;\n    width: 1.5em;\n\n    .#{$prefix}-seekbar {\n      bottom: 0.5em;\n      height: auto;\n      left: 0.3em;\n      overflow: hidden;\n      position: absolute;\n      right: 0.3em;\n      top: 0.5em;\n      width: auto;\n    }\n  }\n}\n","@import '../../variables';\n@import '../../mixins';\n\n.#{$prefix}-ui-casttogglebutton {\n  @extend %ui-button;\n\n  .#{$prefix}-ui-icon {\n    background-image: svg-load('../../assets/images/cast.svg', fill=$color-icon);\n  }\n\n  &:hover {\n    @include svg-icon-shadow;\n  }\n}\n","@import '../../variables';\n@import '../../mixins';\n\n.#{$prefix}-ui-cast-status-overlay {\n  @extend %ui-container;\n\n  @include layout-cover;\n  @include hidden-animated;\n\n  background: $color-background url('../../assets/images/cast.svg') center no-repeat;\n  background-size: 6em 6em;\n\n  .#{$prefix}-ui-cast-status-label {\n    color: $color-primary;\n    left: 0;\n    margin: 0 2em;\n    pointer-events: none;\n    position: absolute;\n    right: 0;\n    text-align: center;\n    top: 65%;\n\n    * {\n      pointer-events: none;\n    }\n  }\n}\n","@import '../../variables';\n@import '../../mixins';\n\n.#{$prefix}-ui-errormessage-overlay {\n  @extend %ui-container;\n\n  @include layout-cover;\n  @include hidden;\n\n  background-color: $color-background;\n  pointer-events: none;\n\n  .#{$prefix}-ui-errormessage-label {\n    color: $color-primary;\n    left: 3em;\n    position: absolute;\n    right: 3em;\n    text-align: center;\n    user-select: text;\n    white-space: pre-line; // enable linebreak in text\n    line-height: 1.2;\n\n    // Vertically center the label\n    & {\n      top: 50%;\n      transform: translateY(-50%);\n    }\n\n    ul {\n      color: $color-secondary;\n      padding: 0;\n\n      li {\n        list-style: none;\n      }\n    }\n  }\n\n  .#{$prefix}-ui-tvnoisecanvas {\n    @include layout-cover;\n\n    filter: blur(4px);\n  }\n}\n","@import '../variables';\n@import '../mixins';\n\n.#{$prefix}-ui-titlebar {\n  @extend %ui-container;\n\n  @include hidden-animated-focusable;\n  @include layout-align-top;\n  @include background-gradient(to top);\n\n  box-sizing: border-box;\n\n  $titlebar-padding: 1.5em;\n  padding: safe-area-max($titlebar-padding, top) safe-area-max($titlebar-padding, right) $titlebar-padding\n    safe-area-max($titlebar-padding, left);\n\n  pointer-events: none;\n\n  .#{$prefix}-container-wrapper {\n    display: flex;\n    flex-direction: column;\n    // sass-lint:disable no-misspelled-properties\n    row-gap: 0.5em;\n  }\n\n  .#{$prefix}-titlebar-row {\n    > .#{$prefix}-container-wrapper {\n      display: flex;\n      flex-direction: row;\n      column-gap: 0.3rem;\n    }\n  }\n\n  > .#{$prefix}-container-wrapper {\n    pointer-events: none;\n\n    .#{$prefix}-label-metadata {\n      cursor: default;\n      pointer-events: none;\n\n      > * {\n        cursor: default;\n        pointer-events: none;\n        display: block;\n        text-shadow: 0 0 5px $color-black;\n      }\n    }\n\n    .#{$prefix}-label-metadata-title {\n      .#{$prefix}-ui-label-text {\n        font-size: $font-size-large;\n        white-space: nowrap;\n      }\n    }\n\n    .#{$prefix}-label-metadata-description {\n      .#{$prefix}-ui-label-text {\n        line-height: 1.5;\n        white-space: normal;\n      }\n    }\n  }\n}\n","@import '../../variables';\n@import '../../mixins';\n\n.#{$prefix}-ui-recommendation-overlay {\n  @extend %ui-container;\n\n  @include layout-cover;\n  @include hidden-animated($animation-duration * 2);\n\n  background-color: $color-background-dimmed;\n\n  .#{$prefix}-container-wrapper {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-evenly;\n    width: 100%;\n    height: 100%;\n  }\n\n  .#{$prefix}-replay-section {\n    .#{$prefix}-container-wrapper {\n      align-items: center;\n    }\n  }\n\n  &:not(.#{$prefix}-recommendations) {\n    .#{$prefix}-recommendations-section {\n      display: none;\n    }\n  }\n\n  .#{$prefix}-recommendations-section {\n    max-width: 100%;\n    width: 100%;\n\n    .#{$prefix}-container-wrapper {\n      align-items: center;\n      overflow-x: auto;\n      display: flex;\n      justify-content: space-evenly;\n      flex-direction: row;\n      column-gap: 5%;\n      padding: 1em 5%;\n    }\n\n    .#{$prefix}-ui-recommendation-item {\n      @include focusable;\n\n      position: relative;\n      $padding: 0.5em;\n      cursor: pointer;\n      color: $color-primary;\n      background-color: $color-background-menu;\n      background-position: center;\n      background-size: cover;\n      border: solid $color-primary 2px;\n      border-radius: 0.5rem;\n      box-shadow: 0 0 5px 0 transparentize($color: $color-black, $amount: 0.75);\n      // sass lint mentions 'aspect-ratio' as a misspelled property, but it's valid CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio.\n      // Therefore we're temporarily disabling that rule for one line.\n      // sass-lint:disable no-misspelled-properties\n      aspect-ratio: 16 / 9;\n      width: 30%;\n      min-width: 10em;\n      text-align: left;\n      overflow: hidden;\n      flex-shrink: 0;\n      transform: scale(1);\n      transition: transform $animation-duration-short ease-in;\n      // sass-lint:disable no-vendor-prefixes\n      -webkit-tap-highlight-color: transparent;\n\n      .#{$prefix}-title-container {\n        @include layout-align-top;\n        @include background-gradient(to top);\n\n        left: 0;\n        height: 50%;\n        min-height: fit-content;\n        padding: $padding;\n\n        .#{$prefix}-title {\n          display: inline-block;\n          top: $padding;\n          left: $padding;\n          right: $padding;\n          white-space: normal;\n          max-height: $font-size * 2;\n          text-overflow: ellipsis;\n          overflow: hidden;\n        }\n      }\n\n      .#{$prefix}-duration {\n        position: absolute;\n        bottom: $padding;\n        right: $padding;\n        background-color: $color-background-text;\n        box-sizing: border-box;\n        padding: 0.3em 0.5em;\n        border-radius: $border-radius;\n      }\n\n      &:hover,\n      &:focus {\n        transform: scale(1.05);\n      }\n    }\n  }\n}\n","@import '../../variables';\n@import '../../mixins';\n\n.#{$prefix}-ui-dismiss-click-overlay {\n  @include layout-cover;\n  @include hidden;\n}\n","@import '../../variables';\n@import '../../mixins';\n\n.#{$prefix}-ui-hugereplaybutton {\n  @extend %ui-button;\n\n  height: 5em;\n  outline: none;\n  width: 5em;\n\n  .#{$prefix}-ui-icon {\n    background-image: svg-load('../../assets/images/replay-with-play.svg', fill=$color-icon);\n    background-size: $icon-size-large;\n    height: 100%;\n    width: 100%;\n  }\n}\n","@import '../../variables';\n@import '../../mixins';\n\n.#{$prefix}-ui-replaybutton {\n  @extend %ui-button;\n\n  .#{$prefix}-ui-icon {\n    background-image: svg-load('../../assets/images/replay.svg', fill=$color-icon);\n  }\n\n  &:hover {\n    @include svg-icon-shadow;\n  }\n}\n","@import '../../variables';\n\n.#{$prefix}-ui-playbacktimelabel {\n  @extend %ui-label;\n\n  font-weight: $font-weight-medium;\n  text-transform: uppercase;\n\n  &.#{$prefix}-ui-playbacktimelabel-live {\n    cursor: pointer;\n\n    &::before {\n      color: $color-secondary;\n      content: '●';\n      padding-right: 0.2em;\n    }\n\n    &.#{$prefix}-ui-playbacktimelabel-live-edge {\n      &::before {\n        color: $color-red;\n      }\n    }\n  }\n}\n","@import '../../variables';\n@import '../../mixins';\n\n// H/V center items in the middle of the overlay\n%center-items-in-overlay {\n  display: table;\n\n  > .#{$prefix}-container-wrapper {\n    display: table-cell;\n    text-align: center;\n    vertical-align: middle;\n  }\n}\n\n.#{$prefix}-ui-buffering-overlay {\n  @extend %ui-container;\n  @extend %center-items-in-overlay;\n\n  @include layout-cover;\n  @include hidden-animated($animation-duration * 2);\n\n  background-color: $color-background-dimmed;\n\n  > .#{$prefix}-container-wrapper {\n    padding: 3em;\n  }\n\n  a {\n    color: $color-primary;\n\n    &:hover,\n    &:visited {\n      color: $color-primary;\n    }\n  }\n\n  .#{$prefix}-ui-buffering-overlay-indicator {\n    $buffering-animation-duration: 1.5s;\n    $buffering-animation-delay: 0.2s;\n\n    @keyframes #{$prefix}-fancy {\n      0%,\n      30% {\n        opacity: 0.3;\n      }\n\n      45%,\n      50%,\n      55% {\n        opacity: 1;\n      }\n\n      70%,\n      100% {\n        opacity: 0.3;\n      }\n    }\n\n    animation: #{$prefix}-fancy $buffering-animation-duration ease-in infinite;\n    background: svg-load('../../assets/images/loader.svg', fill=$color-icon) no-repeat center;\n    display: inline-block;\n    height: 2em;\n    margin: 0.2em;\n    width: 2em;\n    opacity: 0.3;\n\n    @for $i from 1 through 3 {\n      &:nth-child(#{$i}) {\n        animation-delay: $buffering-animation-delay * ($i - 1);\n      }\n    }\n  }\n\n  &.#{$prefix}-hidden {\n    .#{$prefix}-ui-buffering-overlay-indicator {\n      display: none;\n      animation: none;\n    }\n  }\n}\n","@import '../../variables';\n@import '../../mixins';\n\n.#{$prefix}-ui-playbacktoggle-overlay {\n  @extend %ui-container;\n\n  .#{$prefix}-ui-hugeplaybacktogglebutton {\n    @include layout-cover;\n  }\n}\n","@import '../../variables';\n@import '../../mixins';\n\n.#{$prefix}-ui-closebutton {\n  @extend %ui-button;\n\n  @keyframes #{$prefix}-pulsate {\n    20% {\n      transform: scale(1.1);\n    }\n\n    40% {\n      transform: scale(1);\n    }\n\n    60% {\n      transform: scale(1.1);\n    }\n\n    80% {\n      transform: scale(1);\n    }\n  }\n\n  .#{$prefix}-ui-icon {\n    background-image: svg-load('../../assets/images/close.svg', stroke=$color-icon);\n  }\n\n  &:hover {\n    @include svg-icon-shadow;\n\n    animation: #{$prefix}-pulsate 1s;\n  }\n}\n","@import '../../variables';\n@import '../../mixins';\n\n.#{$prefix}-ui-airplaytogglebutton {\n  @extend %ui-button;\n\n  .#{$prefix}-ui-icon {\n    background-image: svg-load('../../assets/images/airplay.svg', fill=$color-icon);\n  }\n\n  &:hover {\n    @include svg-icon-shadow;\n  }\n\n  &.#{$prefix}-on {\n    // TODO: replace with filled cast icon once available\n    .#{$prefix}-ui-icon {\n      background-image: svg-load('../../assets/images/airplay.svg', fill=$color-icon);\n    }\n  }\n}\n","@import '../../variables';\n@import '../../mixins';\n\n.#{$prefix}-ui-piptogglebutton {\n  @extend %ui-button;\n\n  .#{$prefix}-ui-icon {\n    background-image: svg-load('../../assets/images/pip.svg', fill=$color-icon);\n  }\n\n  &:hover {\n    @include svg-icon-shadow;\n  }\n\n  &.#{$prefix}-on {\n    .#{$prefix}-ui-icon {\n      background-image: svg-load('../../assets/images/pipX.svg', fill=$color-icon);\n    }\n  }\n}\n","@import '../variables';\n\n%ui-spacer {\n  @extend %ui-component;\n\n  height: 100%;\n  width: 100%;\n}\n\n.#{$prefix}-ui-spacer {\n  @extend %ui-spacer;\n}\n","@import '../../variables';\n\n.#{$prefix}-ui-settings-panel-navigation-text-button {\n  @extend %ui-button;\n\n  padding: 0;\n  justify-content: flex-end;\n\n  &.touched {\n    transform: unset;\n\n    .#{$prefix}-label {\n      color: darken($color-primary, 30%);\n    }\n  }\n\n  .#{$prefix}-label {\n    display: inline-block;\n    text-decoration: underline;\n  }\n}\n","@import '../../../variables';\n@import '../../../mixins';\n\n.#{$prefix}-ui-subtitle-overlay {\n  $colors: (\n    'white': #fff,\n    'black': #000,\n    'red': #f00,\n    'green': #0f0,\n    'blue': #00f,\n    'cyan': #0ff,\n    'yellow': #ff0,\n    'magenta': #f0f,\n  );\n\n  $opacities: (\n    100: 1,\n    75: 0.75,\n    50: 0.5,\n    25: 0.25,\n  );\n\n  $character-edges: (\n    'none': 'none',\n    'raised': '0px 0px 4px $COLOR$, 0px 1px 4px $COLOR$, 0px 2px 4px $COLOR$',\n    'depressed': '$COLOR$ 0px -2px 1px',\n    'uniform':\n      '-2px 0px 1px $COLOR$, 2px 0px 1px $COLOR$, 0px -2px 1px $COLOR$, 0px 2px 1px $COLOR$, -1px 1px 1px $COLOR$, 1px 1px 1px $COLOR$, 1px -1px 1px $COLOR$, 1px 1px 1px $COLOR$',\n    'dropshadowed': ' 0px 2px 1px $COLOR$',\n  );\n\n  $font-sizes: (\n    50: 0.5,\n    75: 0.75,\n    100: 1,\n    150: 1.5,\n    200: 2,\n    300: 3,\n    400: 4,\n  );\n\n  // Font color + opacity\n  @each $color-name, $color-value in $colors {\n    @each $opacity-name, $opacity-value in $opacities {\n      &.#{$prefix}-fontcolor-#{$color-name}#{$opacity-name} {\n        .#{$prefix}-ui-subtitle-label {\n          color: transparentize($color-value, 1 - $opacity-value);\n          // sass-lint:disable no-vendor-prefixes\n          -webkit-text-fill-color: transparentize($color-value, 1 - $opacity-value);\n        }\n      }\n    }\n  }\n\n  // Background color + opacity\n  @each $color-name, $color-value in $colors {\n    @each $opacity-name, $opacity-value in $opacities {\n      &.#{$prefix}-bgcolor-#{$color-name}#{$opacity-name} {\n        .#{$prefix}-subtitle-region-container {\n          .#{$prefix}-ui-subtitle-label {\n            background-color: transparentize($color-value, 1 - $opacity-value);\n          }\n        }\n      }\n    }\n  }\n\n  // Window color + opacity\n  @each $color-name, $color-value in $colors {\n    @each $opacity-name, $opacity-value in $opacities {\n      &.#{$prefix}-windowcolor-#{$color-name}#{$opacity-name} {\n        .#{$prefix}-subtitle-region-container {\n          background-color: transparentize($color-value, 1 - $opacity-value);\n        }\n      }\n    }\n  }\n\n  // Font size\n  @each $name, $value in $font-sizes {\n    &.#{$prefix}-fontsize-#{$name} {\n      .#{$prefix}-ui-subtitle-label {\n        font-size: $value + em;\n      }\n    }\n  }\n\n  // Font character edge and character edge color\n  @each $color-name, $color-value in $colors {\n    @each $name, $value in $character-edges {\n      &.#{$prefix}-characteredge-#{$name}-#{$color-name} {\n        .#{$prefix}-ui-subtitle-label {\n          text-shadow: unquote(str-replace($value, '$COLOR$', $color-value));\n        }\n      }\n    }\n  }\n\n  // Font family\n  &.#{$prefix}-fontfamily-monospacedserif {\n    .#{$prefix}-ui-subtitle-label {\n      font-family: 'Courier New', Courier, 'Nimbus Mono L', 'Cutive Mono', monospace;\n    }\n  }\n\n  &.#{$prefix}-fontfamily-proportionalserif {\n    .#{$prefix}-ui-subtitle-label {\n      font-family: 'Times New Roman', Times, Georgia, Cambria, 'PT Serif Caption', serif;\n    }\n  }\n\n  &.#{$prefix}-fontfamily-monospacedsansserif {\n    .#{$prefix}-ui-subtitle-label {\n      font-family: 'Deja Vu Sans Mono', 'Lucida Console', Monaco, Consolas, 'PT Mono', monospace;\n    }\n  }\n\n  &.#{$prefix}-fontfamily-proportionalsansserif {\n    .#{$prefix}-ui-subtitle-label {\n      font-family: Roboto, 'Arial Unicode Ms', Arial, Helvetica, Verdana, 'PT Sans Caption', sans-serif;\n    }\n  }\n\n  &.#{$prefix}-fontfamily-casual {\n    .#{$prefix}-ui-subtitle-label {\n      font-family: 'Comic Sans MS', Impact, Handlee, fantasy;\n    }\n  }\n\n  &.#{$prefix}-fontfamily-cursive {\n    .#{$prefix}-ui-subtitle-label {\n      font-family: 'Monotype Corsiva', 'URW Chancery L', 'Apple Chancery', 'Dancing Script', cursive;\n      font-style: italic;\n    }\n  }\n\n  &.#{$prefix}-fontfamily-smallcapital {\n    .#{$prefix}-ui-subtitle-label {\n      font-variant: small-caps;\n    }\n  }\n\n  // Font Style\n  &.#{$prefix}-fontstyle-italic {\n    .#{$prefix}-ui-subtitle-label {\n      font-style: italic;\n    }\n  }\n\n  &.#{$prefix}-fontstyle-bold {\n    .#{$prefix}-ui-subtitle-label {\n      font-weight: bold;\n    }\n  }\n}\n","@import '../../variables';\n\n.#{$prefix}-ui-subtitle-list-box-toggle-button {\n  @extend %ui-settingstogglebutton;\n\n  .#{$prefix}-ui-icon {\n    background-image: svg-load('../../assets/images/subtitles.svg', fill=$color-icon);\n  }\n\n  &.#{$prefix}-on {\n    .#{$prefix}-ui-icon {\n      background-image: svg-load('../../assets/images/subtitles.svg', fill=$color-icon);\n    }\n  }\n}\n","@import '../../variables';\n\n.#{$prefix}-ui-audio-track-list-box-toggle-button {\n  @extend %ui-settingstogglebutton;\n\n  .#{$prefix}-ui-icon {\n    background-image: svg-load('../../assets/images/audio-tracks.svg', fill=$color-icon);\n  }\n\n  &.#{$prefix}-on {\n    .#{$prefix}-ui-icon {\n      background-image: svg-load('../../assets/images/audio-tracks.svg', fill=$color-icon);\n    }\n  }\n}\n","@import '../../variables';\n@import '../../mixins';\n\n%opacity-transition {\n  transition: opacity 0.25s ease-out;\n}\n\n%seek-circle {\n  @extend %opacity-transition;\n  background-color: $color-background-seek-circle;\n  border-radius: 50%;\n  content: '';\n  height: 200%;\n  opacity: 0;\n  position: absolute;\n  width: 100%;\n}\n\n%seek-label {\n  @extend %opacity-transition;\n  @include hidden-animated;\n  margin: 0;\n  opacity: 1;\n  position: absolute;\n  z-index: 1;\n}\n\n.#{$prefix}-ui-touch-control-overlay {\n  @extend %ui-container;\n  @include layout-cover;\n\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  text-align: center;\n  transition: background-color $animation-duration;\n\n  // sass-lint:disable nesting-depth\n  > .#{$prefix}-container-wrapper {\n    align-items: center;\n    display: flex;\n\n    .#{$prefix}-seek-forward-label {\n      @extend %seek-label;\n\n      right: 10%;\n    }\n\n    .#{$prefix}-seek-backward-label {\n      @extend %seek-label;\n\n      left: 10%;\n    }\n  }\n\n  &::before {\n    @extend %seek-circle;\n    left: -60%;\n  }\n\n  &::after {\n    @extend %seek-circle;\n    right: -60%;\n  }\n\n  &.#{$prefix}-seek-forward {\n    &::after {\n      opacity: 1;\n    }\n  }\n\n  &.#{$prefix}-seek-backward {\n    &::before {\n      opacity: 1;\n    }\n  }\n}\n","@import '../../variables';\n\n.#{$prefix}-ui-smallcenteredplaybacktogglebutton {\n  @extend %ui-button;\n  @include hidden;\n\n  cursor: default;\n  height: $icon-size-large;\n  outline: none;\n  overflow: hidden; // hide overflow from scale animation\n  width: $icon-size-large;\n\n  &:hover {\n    @include svg-icon-shadow;\n  }\n\n  .#{$prefix}-ui-icon {\n    background-size: $icon-size-large;\n    height: 100%;\n    width: 100%;\n  }\n\n  &.#{$prefix}-on {\n    .#{$prefix}-ui-icon {\n      background-image: svg-load('../../assets/images/pause.svg', fill=$color-icon);\n    }\n  }\n\n  &.#{$prefix}-off {\n    .#{$prefix}-ui-icon {\n      background-image: svg-load('../../assets/images/play.svg', fill=$color-icon);\n    }\n  }\n\n  &.#{$prefix}-no-transition-animations {\n    &.#{$prefix}-on,\n    &.#{$prefix}-off {\n      .#{$prefix}-ui-icon {\n        animation: none;\n        transition: none;\n      }\n    }\n  }\n}\n","@import '../../variables';\n\n%ui-button-ad-skip {\n  @extend %ui-button;\n\n  pointer-events: auto;\n  background-color: transparentize($color-black, 0.25);\n  border-radius: 20px;\n  padding: 0.5em 1em;\n  min-width: fit-content;\n\n  .#{$prefix}-ui-icon {\n    background-image: svg-load('../../assets/images/ad-skip.svg', fill=$color-icon-highlight-ads);\n  }\n\n  .#{$prefix}-label {\n    color: $color-highlight-ads;\n  }\n\n  &.#{$prefix}-disabled {\n    .#{$prefix}-ui-icon {\n      display: none;\n    }\n  }\n\n  &:not(.#{$prefix}-disabled):hover {\n    background-color: $color-black;\n  }\n}\n\n.#{$prefix}-ui-button-ad-skip {\n  @extend %ui-button-ad-skip;\n}\n","@import '../../variables';\n@import '../../mixins';\n\n%ad-status-overlay {\n  @extend %ui-container;\n  @include layout-align-bottom;\n\n  $ad-status-overlay-bottom-offset: 5em;\n  box-sizing: border-box;\n  padding: 1em safe-area-max(1em, right) 0.5em safe-area-max(1em, left);\n  bottom: calc(#{$ad-status-overlay-bottom-offset} + (max(1em, #{safe-area-inset(bottom)}) - 1em));\n  pointer-events: none;\n\n  * {\n    pointer-events: none;\n  }\n\n  .#{$prefix}-ui-button-ad-skip {\n    pointer-events: auto;\n  }\n\n  .#{$prefix}-bar {\n    > .#{$prefix}-container-wrapper {\n      display: flex;\n      margin: 0.5em 0;\n    }\n  }\n}\n\n.#{$prefix}-ui-ad-status-overlay {\n  @extend %ad-status-overlay;\n}\n","@import '../../variables';\n\n.#{$prefix}-ui-ad-message-label {\n  @extend %ui-label;\n\n  .#{$prefix}-ui-label-text {\n    pointer-events: none;\n    cursor: default;\n    display: block;\n    font-size: $font-size-large;\n    font-weight: $font-weight-medium;\n    text-shadow: 0 0 5px $color-black;\n    white-space: normal;\n    margin-right: auto;\n  }\n}\n","@import '../../variables';\n@import '../../mixins';\n\n// Keep this mixin here for now since it is specific to the ad control bar\n@mixin hidden-animated-collapse-and-fade-out($duration: $animation-duration, $original-height: 2em) {\n  transition:\n    opacity $duration ease-out,\n    height $duration ease-out,\n    margin-bottom $duration ease-out,\n    margin-top $duration ease-out;\n  opacity: 1;\n  height: $original-height;\n\n  &.#{$prefix}-hidden {\n    opacity: 0;\n    height: 0;\n    margin-top: 0;\n    margin-bottom: 0;\n    pointer-events: none;\n  }\n}\n\n.#{$prefix}-ad-controlbar {\n  @extend %ui-container;\n\n  @include layout-align-bottom;\n  @include background-gradient(to bottom);\n\n  box-sizing: border-box;\n  $controlbar-padding: 1em;\n  padding: $controlbar-padding safe-area-max($controlbar-padding, right) safe-area-max($controlbar-padding, bottom)\n    safe-area-max($controlbar-padding, left);\n\n  .#{$prefix}-container-wrapper {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .#{$prefix}-ad-controlbar-top {\n    .#{$prefix}-ui-label {\n      font-size: 0.9em;\n    }\n\n    > .#{$prefix}-container-wrapper {\n      display: flex;\n      flex-direction: row;\n    }\n\n    > .#{$prefix}-container-wrapper > * {\n      margin: 0 0.5em;\n    }\n  }\n\n  .#{$prefix}-ad-controlbar-bottom {\n    @include hidden-animated-collapse-and-fade-out($animation-duration, 2em);\n    flex-direction: column;\n    margin-top: 0.5em;\n\n    > .#{$prefix}-container-wrapper {\n      display: flex;\n      flex-direction: row;\n\n      // This nesting is needed to keep related UI styles scoped together.\n      // Refactoring it would trigger other SCSS lint warnings (e.g., selector duplication or specificity conflicts).\n      // sass-lint:disable nesting-depth\n      .#{$prefix}-ui-volumeslider {\n        margin: auto 0.5em;\n        width: 5em;\n      }\n      // sass-lint:enable nesting-depth\n    }\n  }\n}\n","@import 'variables';\n\n// sass-lint:disable nesting-depth\n.#{$prefix}-ui-ads {\n  @import 'components/ads/ad-skip-button';\n  @import 'components/ads/ad-status-overlay';\n  @import 'components/ads/ad-counter-label';\n  @import 'components/ads/ad-message-label';\n  @import 'components/ads/ad-control-bar';\n\n  .#{$prefix}-ui-seekbar {\n    .#{$prefix}-seekbar,\n    .#{$prefix}-seekbar-bars,\n    .#{$prefix}-seekbar-bars > * {\n      pointer-events: none;\n    }\n\n    .#{$prefix}-seekbar-playbackposition-marker,\n    .#{$prefix}-seekbar-bufferlevel,\n    .#{$prefix}-seekbar-seekposition,\n    .#{$prefix}-seekbar-markers {\n      display: none;\n    }\n\n    .#{$prefix}-seekbar-playbackposition {\n      background-color: $color-highlight-ads;\n    }\n  }\n\n  /* Hide the huge playback button overlay while an ad is playing, so a click goes\n   * through to the click-through overlay which will register the click and then\n   * pause playback. In the paused state, the huge playback toggle button will be\n   * shown and continues playback of the ad when clicked.\n   */\n  &.#{$prefix}-player-state-playing {\n    .#{$prefix}-ui-playbacktoggle-overlay {\n      display: none;\n    }\n  }\n}\n","@import 'variables';\n\n.#{$prefix}-ui-cast-receiver {\n  $background-color: transparentize($color-background, 0.15);\n  $overscan-margin: 10%;\n\n  // Add title safe margins for overscan TV sets\n  // 10% as recommended by the Cast docs: https://developers.google.com/cast/docs/custom_receiver#overscan\n  &.#{$prefix}-ui-uicontainer {\n    %box {\n      background: $background-color;\n    }\n\n    .#{$prefix}-ui-controlbar {\n      @extend %box;\n\n      bottom: $overscan-margin;\n      left: $overscan-margin;\n      right: $overscan-margin;\n      width: auto;\n    }\n\n    .#{$prefix}-ui-titlebar {\n      @extend %box;\n\n      left: $overscan-margin;\n      right: $overscan-margin;\n      top: $overscan-margin;\n      width: auto;\n    }\n\n    .#{$prefix}-ui-watermark {\n      margin: 0;\n      right: $overscan-margin;\n      top: $overscan-margin;\n    }\n\n    .#{$prefix}-ui-subtitle-overlay {\n      bottom: $overscan-margin;\n\n      &.#{$prefix}-controlbar-visible {\n        bottom: 20%;\n      }\n\n      // Replace the shadow-based text border with a transparent backdrop for better rendering\n      // performance on Chromecast.\n      .#{$prefix}-ui-subtitle-label {\n        background-color: transparentize($subtitle-text-border-color, 0.5);\n        box-decoration-break: clone;\n        display: inline-flex;\n        line-height: 2;\n        padding: 0.3em 0.5em;\n        text-shadow: none;\n      }\n    }\n\n    // Chromecast (v1) has very poor rendering performance, so we disable the animations.\n    // We also display a pause image while playback is paused, instead of a play action button\n    .#{$prefix}-ui-hugeplaybacktogglebutton {\n      .#{$prefix}-ui-icon {\n        background-image: svg-load('../../assets/images/pause.svg', fill=$color-icon);\n        opacity: 0.7;\n      }\n\n      // sass-lint:disable force-element-nesting\n      &.#{$prefix}-on .#{$prefix}-icon,\n      &.#{$prefix}-off .#{$prefix}-ui-icon {\n        animation: none;\n        transition: none;\n      }\n    }\n\n    // Disable transitions due to poor Chromecast performance\n    .#{$prefix}-seekbar-bufferlevel,\n    .#{$prefix}-seekbar-playbackposition,\n    .#{$prefix}-ui-buffering-overlay,\n    .#{$prefix}-ui-titlebar,\n    .#{$prefix}-ui-controlbar,\n    .#{$prefix}-ui-subtitle-overlay {\n      transition: none;\n    }\n\n    // Hide animated buffering indicators due to poor Chromecast performance\n    .#{$prefix}-ui-buffering-overlay-indicator {\n      display: none;\n    }\n  }\n}\n","@import 'variables';\n@import 'mixins';\n\n.#{$prefix}-ui-smallscreen {\n  // Do not display watermark in mobile view\n  .#{$prefix}-ui-watermark {\n    display: none;\n  }\n\n  .#{$prefix}-ui-cast-status-overlay {\n    background: $color-background; // Remove background Cast icon\n\n    .#{$prefix}-ui-cast-status-label {\n      top: 30%;\n    }\n  }\n\n  // When casting, also display pause icon and disable animations because the transition doesn't look right\n  // sass-lint:disable nesting-depth\n  &.#{$prefix}-remote-control {\n    .#{$prefix}-ui-hugeplaybacktogglebutton,\n    .#{$prefix}-ui-smallcenteredplaybacktogglebutton {\n      &.#{$prefix}-on {\n        .#{$prefix}-ui-icon {\n          animation: none;\n          background-image: svg-load('../../assets/images/pause.svg', fill=$color-icon);\n          visibility: visible;\n        }\n      }\n\n      &.#{$prefix}-off {\n        .#{$prefix}-ui-icon {\n          animation: none;\n        }\n      }\n    }\n  }\n\n  .#{$prefix}-ui-titlebar {\n    // Adjust title bar padding for small screens to better align text with button elements\n    $titlebar-padding: 1em;\n    padding: safe-area-max($titlebar-padding, top) safe-area-max($titlebar-padding, right) $titlebar-padding\n      safe-area-max($titlebar-padding, left);\n\n    .#{$prefix}-label-metadata {\n      margin: 0 0.25em;\n    }\n  }\n\n  // Adjustments for screen width x <= 400\n  &.#{$prefix}-layout-max-width-400 {\n    .#{$prefix}-ui-settings-panel {\n      left: 1em;\n      right: 1em;\n      margin-top: 3.5em;\n      max-height: calc(100% - 3.5em - 3.5em);\n      width: unset;\n    }\n  }\n}\n","@import 'variables';\n@import 'mixins';\n\n.#{$prefix}-ui-tv {\n  .#{$prefix}-ui-seekbar-label {\n    margin-bottom: 0.5em;\n  }\n}\n"],"names":[],"sourceRoot":""}