theme-switcher.scss

.theme-switcher {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    position: relative;
}

.theme-switcher-label.theme-switcher-label {
    color: inherit;
    font: inherit;
    font-family: var(--text-font);
    margin: 0;
}

.theme-switcher__buttons {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--body-background-color);
}

.theme-switcher__button {
    flex-shrink: 1;
    flex-grow: 1;
    box-shadow: var(--shadow-xs);
    padding: .625rem .875rem;
    display: inline-flex;
    align-items: center;
    margin: 0;
    gap: .25rem;
    color: inherit;

    &:first-of-type {
        border-right: .5px solid var(--border-color);
        border-inline-end: .5px solid var(--border-color);
    }

    &:last-of-type {
        border-left: .5px solid var(--border-color);
        border-inline-start: .5px solid var(--border-color);
    }

    .theme-switcher__icon {
        color: var(--icon-color);
    }

    &:hover {
        .theme-switcher__icon {
            color: var(--link-color);
        }
    }
}

.theme-switcher__button[aria-pressed="true"] {
    color: var(--link-color);

    .theme-switcher__icon {
        color: var(--link-color);
    }

    &:hover {
        .theme-switcher__icon {
            color: var(--link-color);
        }
    }
}

.theme-switcher__button[aria-pressed="false"] {
    .theme-switcher__icon {
        color: var(--icon-color);
    }

    &:hover {
        .theme-switcher__icon {
            color: var(--link-color);
        }
    }
}

.theme-switcher__button:hover {
    .theme-switcher__icon {
        color: var(--link-color);
    }
}