special-pages/pages/new-tab/app/components/ShowHide.module.css
.button {
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--ntp-text-normal);

    > * {
        pointer-events: none;
    }

    svg {
        transition: transform .3s;
    }

    &[aria-pressed=false] svg {
        transform: rotate(-180deg);
    }

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

.iconBlock {
    backdrop-filter: blur(48px);
    background-color: var(--ntp-surface-background-color);
    border-radius: 50%;
    height: 1.5rem;
    width: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 2px 4px 0px var(--color-black-at-12), 0px 0px 3px 0px var(--color-black-at-18);
    color: var(--ntp-text-muted);

    [data-theme="dark"] & {
        box-shadow: 0px 2px 4px 0px var(--color-white-at-6), 0px 0px 3px 0px var(--color-white-at-9);
    }
}

.round {
    height: 2rem;
    width: 2rem;
    border-radius: 50%;
    padding-inline: 0;
    background-color: transparent;
    color: var(--ntp-text-muted);

    .iconBlock {
        backdrop-filter: unset;
        background-color: transparent;
        box-shadow: none;
        transition: all 0.3s ease-in;

        [data-theme=dark] & {
            box-shadow: none;
            background-color: transparent;
        }
    }

    &:hover {
        .iconBlock {
            background-color: var(--color-black-at-6);

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

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

.pill {
    height: calc(26 * var(--px-in-rem));
    border-radius: 9999px;
    padding-left: 8px;
    padding-right: 11px;
    font-size: var(--callout-font-size);
    font-weight: var(--callout-font-weight);
    line-height: var(--callout-line-height);
    border: 1px solid var(--ntp-surface-border-color);
    color: var(--ntp-text-muted);
}

.fill {
    backdrop-filter: blur(48px);
    background-color: var(--ntp-surface-background-color);
}

.hover {
    transition: background-color .2s;

    svg {
        margin-right: calc(6 * var(--px-in-rem));
    }

    &:hover {
        background-color: var(--color-black-at-6);
    }

    &:active {
        background-color: var(--color-black-at-12);
    }

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

        &:hover {
            border-color: var(--color-white-at-18);
            background-color: var(--color-white-at-6);
        }

        &:active {
            background-color: var(--color-white-at-12);
        }
    }
}

.bar {
    padding-top: 11px;
    padding-bottom: 11px;
    display: flex;
    justify-content: center;
    font-size: 12px;
}