/*
    Единственное место, где заданы цвет, наведение и положение Фаб-меню веб-клиента —
    как FabAction.ApplyKind в MAUI. Раньше цвета жили в разметке каждой страницы,
    а пункты рисовались MudIconButton'ом с руками навешанными классами mud-fab-*:
    у такой кнопки выигрывали правила .mud-button-text-*, поэтому иконка красилась
    в цвет фона, а при наведении фон подменялся полупрозрачным --mud-palette-*-hover,
    и чип «просвечивал».

    Разметку пунктов даёт AppFabAction, порядок — FabMenuConventions.OrderRank.
*/

:root {
    /* Семантика ролей — те же значения, что в Colors.xaml мобильного клиента. */
    --app-fab-confirm: #16A34A;
    --app-fab-warning: #D97706;
    --app-fab-danger: #B42318;
    --app-fab-neutral: #6E6E6E;

    --app-fab-inset-bottom: 24px;
    --app-fab-inset-right: 24px;
    --app-fab-drawer-width: 320px;
}

/* --- положение ---------------------------------------------------------- */

.app-fab-menu > .mud-fab-menu-container.fixed,
.app-fab-menu > .mud-fab-menu-container.fixed.mud-fab-anchor-bottom-right {
    bottom: var(--app-fab-inset-bottom);
    right: var(--app-fab-inset-right);
    z-index: 25;
    transition: right 0.225s cubic-bezier(0, 0, 0.2, 1);
}

/* Выдвинутая панель фильтров не должна закрывать кнопку. */
.filters-drawer-open .app-fab-menu > .mud-fab-menu-container.fixed,
.filters-drawer-open .app-fab-menu > .mud-fab-menu-container.fixed.mud-fab-anchor-bottom-right {
    right: calc(var(--app-fab-inset-right) + var(--app-fab-drawer-width));
}

/* --- круглая кнопка ----------------------------------------------------- */

.app-fab-menu .mud-fab-menu-button {
    color: #fff;
}

/* --- чипы пунктов ------------------------------------------------------- */

.app-fab-menu .mud-fab.app-fab-item {
    min-width: 200px;
    max-width: min(320px, calc(100vw - 48px));
    justify-content: flex-start;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Подпись пункта — всегда одна строка: имя файла не должно растянуть чип на пол-экрана. */
.app-fab-menu .mud-fab.app-fab-item .mud-fab-label {
    white-space: nowrap;
    overflow: hidden;
}

.app-fab-menu .mud-fab.app-fab-item .mud-icon-root {
    color: inherit;
}

/* Галочка выбранного варианта — вторая иконка чипа — прижата к правому краю. */
.app-fab-menu .mud-fab.app-fab-item .mud-fab-label > .mud-icon-root ~ .mud-icon-root {
    margin-inline-start: auto;
}

/*
    Пункты не приглушаем: MudFabMenu по умолчанию кладёт поверх чипа осветлённую
    копию фона, из-за неё роли перестают различаться цветом.
*/
.app-fab-menu .mud-fab-menu.mud-fab-menu-dampen .mud-fab-menu-item::before {
    display: none;
}

/* --- цвета ролей -------------------------------------------------------- */

.app-fab-menu .mud-fab.app-fab-item--confirm {
    /* Подтверждение — цель большинства открытий меню: цвет плюс насыщенность подписи. */
    font-weight: 600;
    background-color: var(--app-fab-confirm);
}

.app-fab-menu .mud-fab.app-fab-item--confirm:hover,
.app-fab-menu .mud-fab.app-fab-item--confirm:focus-visible,
.app-fab-menu .mud-fab.app-fab-item--confirm:active {
    background-color: color-mix(in srgb, var(--app-fab-confirm) 86%, #000);
}

.app-fab-menu .mud-fab.app-fab-item--primary {
    background-color: var(--mud-palette-primary, #594ae2);
}

.app-fab-menu .mud-fab.app-fab-item--primary:hover,
.app-fab-menu .mud-fab.app-fab-item--primary:focus-visible,
.app-fab-menu .mud-fab.app-fab-item--primary:active {
    background-color: var(--mud-palette-primary-darken, #4a3ec8);
}

.app-fab-menu .mud-fab.app-fab-item--warning {
    background-color: var(--app-fab-warning);
}

.app-fab-menu .mud-fab.app-fab-item--warning:hover,
.app-fab-menu .mud-fab.app-fab-item--warning:focus-visible,
.app-fab-menu .mud-fab.app-fab-item--warning:active {
    background-color: color-mix(in srgb, var(--app-fab-warning) 86%, #000);
}

.app-fab-menu .mud-fab.app-fab-item--danger {
    background-color: var(--app-fab-danger);
}

.app-fab-menu .mud-fab.app-fab-item--danger:hover,
.app-fab-menu .mud-fab.app-fab-item--danger:focus-visible,
.app-fab-menu .mud-fab.app-fab-item--danger:active {
    background-color: color-mix(in srgb, var(--app-fab-danger) 86%, #000);
}

.app-fab-menu .mud-fab.app-fab-item--info,
.app-fab-menu .mud-fab.app-fab-item--exit {
    background-color: var(--app-fab-neutral);
}

.app-fab-menu .mud-fab.app-fab-item--info:hover,
.app-fab-menu .mud-fab.app-fab-item--info:focus-visible,
.app-fab-menu .mud-fab.app-fab-item--info:active,
.app-fab-menu .mud-fab.app-fab-item--exit:hover,
.app-fab-menu .mud-fab.app-fab-item--exit:focus-visible,
.app-fab-menu .mud-fab.app-fab-item--exit:active {
    background-color: color-mix(in srgb, var(--app-fab-neutral) 86%, #000);
}

/* --- состояния ---------------------------------------------------------- */

.app-fab-menu .mud-fab.app-fab-item--inactive,
.app-fab-menu .mud-fab.app-fab-item--inactive:hover,
.app-fab-menu .mud-fab.app-fab-item--inactive:focus-visible,
.app-fab-menu .mud-fab.app-fab-item--inactive:active {
    background-color: color-mix(in srgb, var(--mud-palette-action-disabled-background, rgba(0, 0, 0, 0.12)) 72%, var(--mud-palette-surface, #fff) 28%);
    color: var(--mud-palette-text-disabled, rgba(0, 0, 0, 0.38));
    box-shadow: none;
    pointer-events: none;
    cursor: default;
}

/* Статусный чип: показывает состояние, команды за ним нет. */
.app-fab-menu .mud-fab.app-fab-item--static {
    box-shadow: none;
    pointer-events: none;
    cursor: default;
}

/*
    Место под плавающую кнопку. Вешают на корневой контейнер страницы с Фаб-меню,
    иначе кнопка накрывает последний элемент формы.
*/
.app-fab-clearance {
    padding-bottom: 96px;
}

@media (max-width: 600px) {
    .app-fab-menu .mud-fab.app-fab-item {
        min-width: 168px;
    }
}