/* Стили кнопок */

/* Secondary · 48px */
.secondary-48 {
    cursor: pointer;
    display: flex;
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    border: 1px solid var(--04-border-control);
    background: var(--01-layer-2);
    /* ↓ bottom/XS */
    box-shadow: shadow-bottom-XS-1-x var(--08-Shadow-Bottom-XS-1-y, 1px) var(--08-Shadow-Bottom-XS-1-blur, 2px) var(--08-Shadow-Bottom-XS-1-spread, 0) var(--08-Shadow-Bottom-XS-1-color, rgba(22, 33, 88, 0.09));
}

.secondary-48:hover {
    background: var(--05-layer-2-hover, #F9FAFE);
}

.secondary-48:active {
    background: var(--05-layer-2-pressed);
    box-shadow: var(--08-Shadow-Inner-XS-1-x, 0) var(--08-Shadow-Inner-XS-1-y, 1px) var(--08-Shadow-Inner-XS-1-blur, 2px) var(--08-Shadow-Inner-XS-1-spread, 0) var(--08-Shadow-Inner-XS-1-color, rgba(22, 33, 88, 0.09)) inset;
}

/* Subtle · Violet · 36px */
.subtle-violet-36 {
    display: flex;
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
    width: 36px;
    height: 36px;
    border-radius: var(--radius-300);
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

.subtle-violet-36:hover {
    background: var(--06-theme-violet-layer-soft-hover);
}

.subtle-violet-36:active {
    background: var(--06-theme-violet-layer-soft-pressed);
    /* ⤵ inner/XS */
    box-shadow: var(--08-Shadow-Inner-XS-1-x, 0) var(--08-Shadow-Inner-XS-1-y, 1px) var(--08-Shadow-Inner-XS-1-blur, 2px) var(--08-Shadow-Inner-XS-1-spread, 0) var(--08-Shadow-Inner-XS-1-color, rgba(22, 33, 88, 0.09)) inset;
}