special-pages/pages/new-tab/app/customizer/components/Customizer.module.css
.lowerRightFixed {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}

/** todo: is this a re-usable button, yet? */
.customizeButton {
    backdrop-filter: blur(48px);
    background-color: var(--ntp-surface-background-color);
    border: 1px solid var(--ntp-surface-border-color);
    border-radius: var(--border-radius-sm);
    padding: var(--sp-2) var(--sp-3);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: calc(6 * var(--px-in-rem));
    color: var(--ntp-text-normal);

    [data-theme=dark] & {
        border-color: var(--color-white-at-9);
    }

    &:focus-visible {
        box-shadow: var(--focus-ring);
        outline: none;
    }

    &:hover {
        background-color: var(--color-black-at-6);
        border-color: var(--color-black-at-18);
        [data-theme=dark] & {
            background-color: var(--color-white-at-18);
            border-color: var(--color-white-at-36);
        }
    }

    &:active {
        background-color: var(--color-white-at-12);
        [data-theme=dark] & {
            background-color: var(--color-white-at-24);
            border-color: var(--color-white-at-50);
        }
    }

    &[data-kind="drawer"][aria-expanded="true"] {
        visibility: hidden;
    }

    @media screen and (max-width: 800px) {
        span {
            display: none;
        }
    }
}




