/* start https://en.wikipedia.org/w/load.php?debug=true&lang=en&modules=ext.phonos.styles&only=styles&skin=vector-2022&version=&* */


/**
 * ###IMPORTANT:##
 * If editing this file, please also edit the respective file in the MinervaNeue skin.
 * ####
 *
 * This file is a LESS @import match for "mediawiki.skin.variables.less"
 * when Vector 2022 is the active skin.
 * Please note, that legacy Vector is handled by
 * "mediawiki.less.legacy/mediawiki.skin.variables.less".
 *
 * Please also note, that both current Codex, design system for Wikimedia based skins,
 * Vector 2022 and Minerva Neue are using the same variable values respectively in their
 * repositories.
 */
/* stylelint-disable @stylistic/indentation */
/**
 * Codex design tokens. This imports Less variables, some of which refer to CSS variables.
 * The CSS variable values are imported in CSSCustomProperties.less.
 */
.ext-phonos {
  white-space: nowrap;
}
.ext-phonos-PhonosButton {
  margin: 0;
  /* stylelint-disable-next-line no-descending-specificity */
}
.ext-phonos-PhonosButton.oo-ui-buttonElement-frameless.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
  left: 0;
}
.ext-phonos-PhonosButton.oo-ui-buttonElement-frameless.oo-ui-widget-disabled,
.ext-phonos-PhonosButton.oo-ui-buttonElement-frameless.oo-ui-buttonWidget.oo-ui-iconElement,
.ext-phonos-PhonosButton.oo-ui-buttonElement-frameless.oo-ui-buttonWidget.oo-ui-iconElement:first-child {
  vertical-align: baseline;
  margin-left: 0;
}
.ext-phonos-PhonosButton.oo-ui-buttonElement-frameless.oo-ui-buttonWidget {
  margin-right: 0;
}
.ext-phonos-PhonosButton.ext-phonos-PhonosButton-emptylabel .oo-ui-labelElement-label {
  display: none;
}
.ext-phonos-PhonosButton.oo-ui-buttonElement-frameless.oo-ui-buttonWidget > .oo-ui-buttonElement-button {
  display: inline;
  vertical-align: baseline;
  padding: 0;
  min-height: 22px;
  min-width: 0;
  user-select: auto;
}
.ext-phonos-PhonosButton.oo-ui-buttonElement-frameless.oo-ui-buttonWidget > .oo-ui-buttonElement-button:hover {
  background-color: var(--background-color-progressive-subtle, #f1f4fd);
}
.ext-phonos-PhonosButton.oo-ui-buttonElement-frameless.oo-ui-buttonWidget > .oo-ui-buttonElement-button .oo-ui-iconElement-icon {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  min-width: 0;
  min-height: 0;
  top: 0.1em;
  background-size: cover;
  background-position: left;
}
.ext-phonos-PhonosButton.oo-ui-buttonElement-frameless.oo-ui-buttonWidget > .oo-ui-buttonElement-button .oo-ui-labelElement-label {
  display: inline-block;
  font-weight: normal;
  margin-inline-start: 2px;
}
.ext-phonos-PhonosButton.oo-ui-buttonElement-frameless.oo-ui-buttonWidget.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
  animation: phonos-playing linear;
  background-image: linear-gradient(to right, var(--background-color-progressive-subtle, #f1f4fd) 100%, transparent 100%);
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: left;
}
.ext-phonos-PhonosButton.oo-ui-buttonElement-frameless.oo-ui-labelElement.oo-ui-iconElement > .oo-ui-buttonElement-button {
  padding-left: 0;
}
.ext-phonos-PhonosButton.oo-ui-buttonElement-frameless.ext-phonos-error > .oo-ui-buttonElement-button,
.ext-phonos-PhonosButton.oo-ui-buttonElement-frameless.ext-phonos-error > .oo-ui-buttonElement-button:hover {
  background-color: var(--background-color-disabled-subtle, #eaecf0);
  color: var(--color-base, #202122);
}
@keyframes phonos-playing {
  from {
    background-size: 0 100%;
  }
  to {
    background-size: 100% 100%;
  }
}



/* end   https://en.wikipedia.org/w/load.php?debug=true&lang=en&modules=ext.phonos.styles&only=styles&skin=vector-2022&version=&* */