:root:root .ct-item::before,
:root:root .ct-item:hover::before,
:root:root .ct-item.on::before,
:root:root .ct-item.on:hover::before,
:root:root .ct-item.was-on::before {
    display: none;
}

:root:root .ct-item {
    isolation: auto;
    z-index: auto;
    min-height: 46px;
    margin: 8px 14px 8px 2px;
    border: 2px solid transparent;
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.09) 46%, rgba(255, 255, 255, 0) 47%) padding-box,
        linear-gradient(115deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 55%) padding-box,
        linear-gradient(180deg, #121010 0%, #000000 52%, #060404 100%) padding-box,
        linear-gradient(135deg, #777777 0%, #4a4a4a 22%, #222222 50%, #4c4c4c 78%, #707070 100%) border-box;
    box-shadow:
        inset 0 0 0 2px rgba(0, 0, 0, 0.95),
        inset 0 0 0 3px rgba(255, 255, 255, 0.05),
        inset 0 -7px 9px -7px rgba(255, 255, 255, 0.18),
        0 0 0 1px rgba(0, 0, 0, 0.8),
        0 4px 10px rgba(0, 0, 0, 0.65);
    color: #fff;
    transition: box-shadow 0.25s ease, filter 0.25s ease;
}

:root:root .ct-item:hover {
    filter: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.09) 46%, rgba(255, 255, 255, 0) 47%) padding-box,
        linear-gradient(115deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 55%) padding-box,
        linear-gradient(180deg, #1c1011 0%, #040202 55%, #0c0607 100%) padding-box,
        linear-gradient(135deg, #858585 0%, #545454 22%, #282828 50%, #585858 78%, #7e7e7e 100%) border-box;
    box-shadow:
        inset 0 0 0 2px rgba(0, 0, 0, 0.95),
        inset 0 0 0 3px rgba(255, 255, 255, 0.06),
        inset 0 -7px 9px -7px rgba(255, 255, 255, 0.22),
        0 0 0 1px rgba(0, 0, 0, 0.8),
        0 4px 10px rgba(0, 0, 0, 0.65),
        0 0 14px -2px rgba(240, 40, 55, 0.35);
}

:root:root .ct-item.on,
:root:root .ct-item.on:hover {
    filter: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.14) 46%, rgba(255, 255, 255, 0) 47%) padding-box,
        linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 55%) padding-box,
        linear-gradient(180deg, rgb(195, 20, 31) 0%, rgb(141, 5, 11) 55%, rgb(94, 3, 7) 100%) padding-box,
        linear-gradient(135deg, #929292 0%, #5e5e5e 22%, #2e2e2e 50%, #626262 78%, #8a8a8a 100%) border-box;
    box-shadow:
        inset 0 0 0 2px rgba(50, 0, 4, 0.95),
        inset 0 0 0 3px rgba(255, 255, 255, 0.07),
        inset 0 -7px 9px -7px rgba(255, 140, 150, 0.35),
        0 0 0 1px rgba(0, 0, 0, 0.8),
        0 4px 10px rgba(0, 0, 0, 0.65),
        0 0 18px -4px rgba(255, 40, 60, 0.75);
}

:root:root .ct-item:active,
:root:root .ct-item:focus,
:root:root .ct-item:focus-visible,
:root:root .ct-item:active:hover {
    border: 2px solid transparent;
    outline: 0;
    translate: 0 0;
    transform: none;
    filter: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.14) 46%, rgba(255, 255, 255, 0) 47%) padding-box,
        linear-gradient(115deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 55%) padding-box,
        linear-gradient(180deg, rgb(195, 20, 31) 0%, rgb(141, 5, 11) 55%, rgb(94, 3, 7) 100%) padding-box,
        linear-gradient(135deg, #929292 0%, #5e5e5e 22%, #2e2e2e 50%, #626262 78%, #8a8a8a 100%) border-box;
    box-shadow:
        inset 0 0 0 2px rgba(50, 0, 4, 0.95),
        inset 0 0 0 3px rgba(255, 255, 255, 0.14),
        0 0 0 1px rgba(0, 0, 0, 0.8),
        0 2px 6px rgba(0, 0, 0, 0.65),
        0 0 18px -4px rgba(255, 40, 60, 0.75);
}
