.compilation-dark-mode-toggle {
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    background: transparent;
    color: var(--wp--preset--color--base);
    transition: background-color 0.3s;
}

.compilation-dark-mode-toggle:hover {
    color: var(--wp--preset--color--tertiary);
}

.compilation-dark-mode-toggle__icon {
    width: 20px;
    height: 20px;
    position: relative;
}

.compilation-dark-mode-toggle__icon svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.215,.61,.355,1);
}

.compilation-dark-mode-toggle__icon .feather-sun {
    opacity: 1;
    transform: rotate(0deg);
}

.compilation-dark-mode-toggle__icon .feather-moon {
    opacity: 0;
    transform: rotate(90deg);
}

.compilation-is-dark .compilation-dark-mode-toggle__icon .feather-sun {
    opacity: 0;
    transform: rotate(-90deg);
}

.compilation-is-dark .compilation-dark-mode-toggle__icon .feather-moon {
    opacity: 1;
    transform: rotate(0deg);
}