@import (once) "../../include/mixins";

:root {
    --theme-switcher-background: #e9e9e9;
    --theme-switcher-background-button: #ffffff;
    --theme-switcher-background-checked: #191919;
    --theme-switcher-background-disabled: #e8e8e8;
    --theme-switcher-toggle-color: #fff;
    --theme-switcher-toggle-disabled: #ccc;
    --theme-switcher-text-color: #000;
    --theme-switcher-text-color-checked: #fff;
    --theme-switcher-focus-color: #e8e8e8;
    --theme-switcher-border-color: #e8e8e8;
}

.dark-side {
    --theme-switcher-background: #232527;
    --theme-switcher-background-button: #232527;
    --theme-switcher-background-checked: #474748;
    --theme-switcher-toggle-color: #232527;
    --theme-switcher-toggle-disabled: #3e4145;
    --theme-switcher-text-color: #efefef;
    --theme-switcher-text-color-checked: #fff;
    --theme-switcher-focus-color: #191919;
    --theme-switcher-border-color: #474748;
}

.theme-switcher {
    &.mode-switch {
        height: 36px;
        padding: 8px 0;
        margin: 0 .25rem;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;
        width: auto;
        flex-wrap: nowrap;

        & > input {
            appearance: none;
            position: relative;
            width: 48px;
            height: 20px;
            order: 2;
            background: var(--theme-switcher-background);
            border-radius: 10px;
            cursor: pointer;
            transition: 0.3s background-color;
            margin: 0;
            padding: 0;
            border-color: transparent!important;

            &::before {
                content: attr(data-light-symbol);
                position: absolute;
                top: 0;
                left: 0;
                width: 16px;
                height: 16px;
                background: var(--theme-switcher-toggle-color);
                border-radius: 50%;
                transition: 0.3s;
                opacity: 1;
                border: 1px solid transparent;
                transform: none;
                line-height: 1;
                font-size: 13px;
                padding: 0;
                margin: 0;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            &::after {
                position: absolute;
                content: attr(data-off);
                top: 5px;
                left: 2px;
                transform: translate(20px, 0);
                color: var(--theme-switcher-text-color);
                text-transform: uppercase;
                font-size: 8px;
                font-weight: 400;
                transition: 0.3s transform;
                line-height: 1;
            }

            &:checked {
                background: var(--theme-switcher-background-checked);

                &::before {
                    content: attr(data-dark-symbol);
                    transform: translateX(28px);
                    color: #191919;
                }

                &::after {
                    content: attr(data-on);
                    transform: translateX(6px);
                    color: var(--theme-switcher-text-color-checked);
                }
            }

            &:disabled {
                background: var(--theme-switcher-background-disabled);

                &::before {
                    background: var(--theme-switcher-toggle-disabled);
                }
            }
        }
    }
    
    /* TODO add slide up-down to the theme symbol */
    &.mode-button {
        height: 36px;
        width: 36px;
        border: 2px solid var(--theme-switcher-border-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--theme-switcher-background-button);
        transition: background-color 0.5s;
        
        & > input {
            appearance: none;
            border: none;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            
            &::before {
                color: var(--theme-switcher-text-color);
                content: attr(data-light-symbol);
                border: none;
                transform: none;
                line-height: 1;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                left: 0;
                top: 0;
                opacity: 1;
                font-size: 1.4rem
            }
            
            &:checked {
                &::before {
                    content: attr(data-dark-symbol);
                }
            }
        }

        & > input[type=checkbox]:focus {
            box-shadow: none;
        }
    }
}