/**
 * This file is a LESS import match for "mediawiki.skin.variables.less"
 * when legacy Vector (useskin=vector) is the active skin.
 */
/* stylelint-disable stylistic/indentation */
/**
 * Codex Design Tokens v1.6.1
 * Design System for Wikimedia
 * See https://doc.wikimedia.org/codex/latest/design-tokens/overview.html
 */
.ext-phonos {
  white-space: nowrap;
}
.ext-phonos-attribution {
  margin-inline-start: 3px;
}
.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, #eaf3ff);
}
.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: 0.3em;
}
.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, #eaf3ff) 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%;
  }
}