.setting-button {
    &:is(:hover, :active),
    &[data-active="true"] {
        span {
            border-color: var(--black);
        }
    }
}

.setting-color {
    position: relative;

    &.disabled {
        text-decoration: line-through;
    }
}

.themer-menu {
    left: -100%;
    top: calc(var(--header-height) + var(--doc-menu-height));
    height: calc(100dvh - var(--header-height) - var(--doc-menu-height));

    &[data-open="true"] {
        left: 0%;
    }
}

@media screen and (min-width: 992px) {
    .themer-menu {
        left: unset;
        top: unset;
        height: 100%;
    }
}