/* ————— Значок «плей / пауза» (Components/PlayPauseIcon.razor) —————

   Полосы паузы перетекают в треугольник и обратно. Точки здесь и в атрибутах компонента одни
   и те же; в CSS они нужны, чтобы у формы был переход: атрибут браузер меняет скачком.

   Треугольник занимает 7.5–18.5 по ширине, то есть смещён на единицу вправо от центра. Это и есть
   оптическая середина: центр тяжести треугольника лежит левее середины его рамки, и ровно
   отцентрованный «плей» казался бы сдвинутым влево. Отдельные сдвиги в местах больше не нужны. */

.ppi {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    overflow: visible;
    pointer-events: none;
    transition: scale 120ms ease;
}

/* Скруглённые углы — обводкой того же цвета: у фигур из прямых отрезков своих скруглений нет. */
.ppi path {
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linejoin: round;
    transition: d 280ms cubic-bezier(0.3, 0.7, 0.2, 1);
}

/* Правая фигура чуть запаздывает — значок не щёлкает целиком, а складывается по очереди. */
.ppi .ppi-b {
    transition-delay: 30ms;
}

.ppi.shows-pause .ppi-a {
    d: path("M6.5 5.5L9.5 5.5L9.5 18.5L6.5 18.5Z");
}

.ppi.shows-pause .ppi-b {
    d: path("M14.5 5.5L17.5 5.5L17.5 18.5L14.5 18.5Z");
}

.ppi.shows-play .ppi-a {
    d: path("M7.5 5.5L13 8.75L13 15.25L7.5 18.5Z");
}

.ppi.shows-play .ppi-b {
    d: path("M13 8.75L18.5 12L18.5 12L13 15.25Z");
}

/* Нажатие чувствуется: значок на миг проседает. */
button:active > .ppi,
.play-pause:active .ppi {
    scale: 0.88;
}

@media (prefers-reduced-motion: reduce) {
    .ppi,
    .ppi path {
        transition: none;
    }
}