/* plusbutton — круглая кнопка с плюсом.

   Плюс — фигура из двух полос, а не иконка из svg: он растёт вместе
   с кнопкой и красится currentColor, той же краской, что и всё
   остальное на акценте.

   Размер настраивается переменными, поэтому кнопка подходит и шапке
   профиля, и любому другому месту:

       --pb-size  диаметр круга
       --pb-plus  сторона плюса внутри */

.plusbutton {
    --pb-size: 40px;
    --pb-plus: 16px;

    flex: none;
    display: grid;
    place-items: center;
    width: var(--pb-size);
    height: var(--pb-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-accent-fg);
    cursor: pointer;
    transition: background-color var(--motion-control-duration, 220ms) var(--motion-ease, ease);
}

/* Наведение — краской, как у colorbutton: акцент темнеет на 12%,
   плюс остаётся чётким. */
.plusbutton:hover {
    background: var(--color-accent-hover);
}

/* Фокус — обводка акцентом: та же краска, что у других обводок сайта. */
.plusbutton:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Плюс: две полосы в одной коробке, каждая посередине. Толщина —
   восьмая часть стороны, поэтому плюс остаётся тонким при любом
   размере кнопки. */
.plusbutton__plus {
    position: relative;
    width: var(--pb-plus);
    height: var(--pb-plus);
}

.plusbutton__plus::before,
.plusbutton__plus::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 1px;
    background: currentColor;
    transform: translate(-50%, -50%);
}

.plusbutton__plus::before {
    width: 100%;
    height: calc(var(--pb-plus) * 0.125);
}

.plusbutton__plus::after {
    width: calc(var(--pb-plus) * 0.125);
    height: 100%;
}

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