/*!*!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-2.use[3]!./web/themes/uw/un2_theme/scss/libraries/un_audio_player.scss ***!
  \*/
/***
 * Colors
 ***/
/**
 * Typography
 **/
/**
 * Global elements
 **/
/*
 * Sizing/Spacing
 */
/**
 * Forms
 */
/*
 * Bootstrap
 */
/
 * Mappings
 ****/
/*
 * IMPORTANT:
 *   - This file should *only contain* variables not considered UN style guide *
 */
/**
  Help theming for rtl languages.
*/
/*
 * This handles indentation for the depth of child levels for accordion
 * TODO: improve this implementation, overly complex due to previous design
 */
/*
 * Adds color & text-shadow-based outline to type.
 *
 * @param {color} $color - Color of the marker.
 * @param {color} $border-color - Color for the outline, or border.
 * @param {percent} $border-alpha - Value used in sass:color.scale().
 */
/*
 * Encapsulates the styles for the WYSIWYG editor.
 *
 * We use a mixin in order to be able to reuse these rules inside the
 * CKEditor5 stylesheet to provide the same styles for the editor content.
 * @see un2_theme/scss/admin/_ckeditor5.scss.
 * @see un2_theme/scss/components/_wysiwyg.scss.
 */
.mediaelementjs.mejs__audio {
  max-width: 100%;
}

[dir] .mediaelementjs.mejs__audio {
  background: #f5f5f5;
}

[dir] .mediaelementjs.mejs__audio .mejs__controls {
  background: none;
}

.mediaelementjs.mejs__audio .mejs__controls .mejs__playpause-button.mejs__play button {
  -webkit-mask-image: url(/youthaffairs/themes/dist/58c0d76cb4107ba5a0c3.svg);
          mask-image: url(/youthaffairs/themes/dist/58c0d76cb4107ba5a0c3.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

[dir] .mediaelementjs.mejs__audio .mejs__controls .mejs__playpause-button.mejs__play button {
  background-color: #009edb;
  background-image: none;
  background-position: center center;
  background-repeat: no-repeat;
}

.mediaelementjs.mejs__audio .mejs__controls .mejs__playpause-button.mejs__pause button {
  -webkit-mask-image: url(/youthaffairs/themes/dist/7891334d1bdb9abd59dc.svg);
          mask-image: url(/youthaffairs/themes/dist/7891334d1bdb9abd59dc.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

[dir] .mediaelementjs.mejs__audio .mejs__controls .mejs__playpause-button.mejs__pause button {
  background-color: #009edb;
  background-image: none;
  background-position: center center;
  background-repeat: no-repeat;
}

.mediaelementjs.mejs__audio .mejs__controls .mejs__volume-button > button {
  width: 24px;
}

[dir] .mediaelementjs.mejs__audio .mejs__controls .mejs__volume-button > button {
  margin-inline-start: 2px;
}

.mediaelementjs.mejs__audio .mejs__controls .mejs__volume-button.mejs__mute button {
  -webkit-mask-image: url(/youthaffairs/themes/dist/519b787d04fef70bdb63.svg);
          mask-image: url(/youthaffairs/themes/dist/519b787d04fef70bdb63.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

[dir] .mediaelementjs.mejs__audio .mejs__controls .mejs__volume-button.mejs__mute button {
  background-color: #009edb;
  background-image: none;
  background-position: center center;
  background-repeat: no-repeat;
}

.mediaelementjs.mejs__audio .mejs__controls .mejs__volume-button.mejs__unmute button {
  -webkit-mask-image: url(/youthaffairs/themes/dist/9a2de0222f2738dd3180.svg);
          mask-image: url(/youthaffairs/themes/dist/9a2de0222f2738dd3180.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

[dir] .mediaelementjs.mejs__audio .mejs__controls .mejs__volume-button.mejs__unmute button {
  background-color: #009edb;
  background-image: none;
  background-position: center center;
  background-repeat: no-repeat;
}

[dir] .mediaelementjs.mejs__audio .mejs__controls .mejs__horizontal-volume-total {
  background: #bfbfbf;
}

[dir] .mediaelementjs.mejs__audio .mejs__controls .mejs__horizontal-volume-total .mejs__horizontal-volume-current {
  background-color: var(--bs-primary);
}

.mediaelementjs.mejs__audio .mejs__controls .mejs__time-total {
  height: 13px;
}

[dir] .mediaelementjs.mejs__audio .mejs__controls .mejs__time-total {
  margin-block-start: 4px;
  background: #bfbfbf;
}

[dir] .mediaelementjs.mejs__audio .mejs__controls .mejs__time-total .mejs__time-current {
  background-color: var(--bs-primary);
}

.mediaelementjs.mejs__audio .mejs__controls .mejs__time {
  color: #404040;
}

.mediaelementjs.mejs__audio .mejs__controls .mejs__time .mejs__currenttime,
.mediaelementjs.mejs__audio .mejs__controls .mejs__time .mejs__duration {
  font-weight: normal;
  font-size: 0.875rem;
}