.m-quick-tools {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--quick-tools-gap);
    min-inline-size: 0;
}

.m-quick-tools .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.m-quick-tools__preferences,
.m-quick-tools__form {
    display: contents;
}

.m-quick-tools__action,
.m-quick-tools .m-topbar__utility-btn,
.m-quick-tools .m-storefront-switcher-menu > summary {
    inline-size: var(--quick-tools-control-size);
    min-inline-size: var(--quick-tools-control-size);
    max-inline-size: var(--quick-tools-control-size);
    block-size: var(--quick-tools-control-size);
    min-block-size: var(--quick-tools-control-size);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--m-context-border, var(--m-topbar-user-btn-border, #dbe3ef));
    border-radius: var(--quick-tools-control-radius);
    background: var(--m-context-surface, var(--m-topbar-user-btn-bg, #fff));
    color: var(--m-context-text-strong, var(--m-topbar-user-name-color, #0f172a));
    box-shadow: none;
    text-decoration: none;
    cursor: pointer;
}

.m-quick-tools__action:hover,
.m-quick-tools__action:focus-visible,
.m-quick-tools .m-topbar__utility-btn:hover,
.m-quick-tools .m-topbar__utility-btn[aria-expanded="true"],
.m-quick-tools .m-storefront-switcher-menu[open] > summary {
    border-color: var(--m-context-accent-color, var(--m-topbar-user-btn-hover-border, #2563eb));
    background: var(--m-context-accent-soft, var(--m-topbar-user-btn-hover-bg, #eff6ff));
    color: var(--m-context-accent-color, var(--m-topbar-link-hover-text, #2563eb));
}

.m-quick-tools__action:focus-visible,
.m-quick-tools .m-topbar__utility-btn:focus-visible,
.m-quick-tools .m-storefront-switcher-menu > summary:focus-visible {
    outline: 2px solid var(--m-context-accent-color, #2563eb);
    outline-offset: 2px;
}

.m-quick-tools__action > i,
.m-quick-tools .m-topbar__utility-btn i,
.m-quick-tools .m-storefront-switcher-menu > summary i {
    font-size: 1.2rem;
    line-height: 1;
}

.m-quick-tools__action.is-cleaning > i {
    animation: m-quick-tools-spin .7s linear infinite;
}

@keyframes m-quick-tools-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 640px) {
    :root {
        --quick-tools-control-size: 2.55rem;
        --quick-tools-gap: .3rem;
    }
}