/* nunito-300 - latin */
@font-face {
    font-display: swap;
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/nunito-v26-latin/nunito-v26-latin-300.woff2') format('woff2'),
    url('../fonts/nunito-v26-latin/nunito-v26-latin-300.ttf') format('truetype');
}
/* nunito-regular - latin */
@font-face {
    font-display: swap;
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/nunito-v26-latin/nunito-v26-latin-regular.woff2') format('woff2'),
    url('../fonts/nunito-v26-latin/nunito-v26-latin-regular.ttf') format('truetype');
}
/* nunito-500 - latin */
@font-face {
    font-display: swap;
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/nunito-v26-latin/nunito-v26-latin-500.woff2') format('woff2'),
    url('../fonts/nunito-v26-latin/nunito-v26-latin-500.ttf') format('truetype');
}
/* nunito-600 - latin */
@font-face {
    font-display: swap;
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/nunito-v26-latin/nunito-v26-latin-600.woff2') format('woff2'),
    url('../fonts/nunito-v26-latin/nunito-v26-latin-600.ttf') format('truetype');
}
/* nunito-700 - latin */
@font-face {
    font-display: swap;
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/nunito-v26-latin/nunito-v26-latin-700.woff2') format('woff2'),
    url('../fonts/nunito-v26-latin/nunito-v26-latin-700.ttf') format('truetype');
}
/* nunito-800 - latin */
@font-face {
    font-display: swap;
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/nunito-v26-latin/nunito-v26-latin-800.woff2') format('woff2'),
    url('../fonts/nunito-v26-latin/nunito-v26-latin-800.ttf') format('truetype');
}
/* nunito-900 - latin */
@font-face {
    font-display: swap;
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/nunito-v26-latin/nunito-v26-latin-900.woff2') format('woff2'),
    url('../fonts/nunito-v26-latin/nunito-v26-latin-900.ttf') format('truetype');
}


/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}

:root {
    --color-bg: #fff;
    --color-text: #333;
    --color-main: #0285FF;
    --color-control-bg: #ccc;
    --color-control-bg-subtle: rgba(204,204,204,0.4);
    --color-control: #fff;
    --color-divider: #f1f2f3;

    --color-green: #16C213;
    --color-orange: #F09D1C;
    --color-red: #DE1E1C;

    --speed: 250ms;

    --easing: cubic-bezier(0.16, 1, 0.3, 1); /* easeOutExpo */
    /*--easing: cubic-bezier(0.34, 1.56, 0.64, 1); /* easeOutBack */
}

/* dark mode: */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #282828;
        --color-text: #d7d7d7;
        --color-control-bg: #7c7c7c;
        --color-control-bg-subtle: rgba(124,124,124,0.4);
        --color-control: #fff;
        --color-divider: #3d3e3d;
    }
}

html {
    padding: 0;
    margin: 0;
}
body {
    color: var(--color-text);
    background: var(--color-bg);
    padding: 0;
    margin: 0;
    width: 170px;
    user-select: none;
    font-family: Nunito, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
}

.settings {
    padding: 5px 0 6px 0;
}

.settings-group.disabled {
    pointer-events: none;
    opacity: 0.4;
}

.setting {
    padding: 5px 10px;
    &.disabled {
        pointer-events: none;
        opacity: 0.4;
    }
}

/* checkbox */
.setting-checkbox {
    display: grid;
    grid-template-columns: 1fr 40px;
    grid-gap: 10px;
    align-items: center;
    cursor: pointer;


    > .col {
        &.col-label {
            svg {
                display: inline-block;
                transform: translateY(1.5px);
                margin-right: 3px;
            }
            span {
                display: inline-block;
            }
        }
        &.col-checkbox {
            line-height: 0;
        }
    }

    .switch {
        position : relative ;
        display : inline-block;
        width : 40px;
        height : 20px;
        background-color: var(--color-control-bg);
        border-radius: 20px;
        cursor: pointer;
    }

    .switch::after {
        content: '';
        position: absolute;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: var(--color-control);
        top: 1px;
        left: 1px;
    }
    .checkbox:checked + .switch::after {
        left : 21px;
    }
    .checkbox:checked + .switch {
        background-color: var(--color-main);
    }
    .checkbox {
        display : none;
    }
}

/* range input for volume */
.setting-volume {
    label {
        display: block;
        margin-bottom: 5px;
    }

    .volume-wrap {
        position: relative;
        height: 20px;

        & input[type="range"] {
            position: relative;
            -webkit-appearance: none;
            appearance: none;
            background: transparent;
            cursor: pointer;
            width: 100%;

            &:focus {
                outline: none;
            }

            &::-webkit-slider-runnable-track {
                background-color: var(--color-control-bg);
                border-radius: 10px;
                height: 20px;
                padding: 0 2px;
            }
            &::-webkit-slider-thumb {
                -webkit-appearance: none;
                appearance: none;
                margin-top: 1px;
                background-color: var(--color-control);
                border-radius: 9px;
                height: 18px;
                width: 18px;
            }
            &:focus::-webkit-slider-thumb {
                outline: none;
            }

            /* firefox */
            &::-moz-range-track {
                background-color: var(--color-control-bg);
                border-radius: 10px;
                height: 20px;
            }
            &::-moz-range-thumb {
                opacity: 0;
            }
            &:focus::-moz-range-thumb{
                outline: none;
            }

        }

        .active-track {
            opacity: 1;
            pointer-events: none;
            position: absolute;
            top: 1px;
            left: 1px;
            width: calc(var(--value) * 100% +
                (18px - var(--value) * 20px) /* +18px to the left, -2px to the right */
            );

            height: 18px;
            background: var(--color-control);
            border-radius: 9px;

        }

        .thumb {
            opacity: 1;
            pointer-events: none;
            position: absolute;
            top: 1px;
            left: calc(var(--value) * 100% +
                (1px - var(--value) * 20px) /* +1px to the left, -19px to the right */
            );
            width: 18px;
            height: 18px;
            background: var(--color-control);

            --shadow-opacity: min(0.4, calc(var(--value) - 0.08));

            box-shadow: 0 0 0 1px rgba(124,124,124,var(--shadow-opacity));
            border-radius: 9px;
        }

        .icon {
            opacity: 1;
            pointer-events: none;
            position: absolute;
            top: 2px;
            left: 2px;
            width: 16px;
            height: 16px;
            background: url(../img/icon-volume-off-dark.png) no-repeat 0 0;
            background-size: 16px 16px;
            border-radius: 8px;
            transition: all var(--speed) var(--easing);
        }
    }


    &[data-volume-class="off"] {
        .volume-wrap {
            .icon {
                background-image: url(../img/icon-volume-off-dark.png);
                transition: all var(--speed) var(--easing);
            }
        }
    }
    &[data-volume-class="half"] {
        .volume-wrap {
            .icon {
                background-image: url(../img/icon-volume-half-dark.png);
                transition: all var(--speed) var(--easing);
            }
        }
    }
    &[data-volume-class="full"] {
        .volume-wrap {
            .icon {
                background-image: url(../img/icon-volume-full-dark.png);
                transition: all var(--speed) var(--easing);
            }
        }
    }


}

.setting-divider {
    margin: 5px 0;
    height: 1px;
    background: var(--color-divider);
}

/* custom icons */
.setting-checkbox {
    &[data-state="requestsSameOrigin"] > .col.col-label svg {
        color: var(--color-green);
    }
    &[data-state="requestsCrossOrigin"] > .col.col-label svg {
        color: var(--color-orange);
    }
    &[data-state="requestsTrackers"] > .col.col-label svg {
        color: var(--color-red);
    }
    &[data-state="requestsMalware"] > .col.col-label svg {
        color: var(--color-text);
    }
}

/* only enable animations after init, so the sliders don't slide around when the popup first opens */
body.initialized {
    .setting-checkbox {
        .switch::after {
            transition: all var(--speed) var(--easing);
        }
    }
    .settings-group,
    .setting {
        transition: all var(--speed) var(--easing);
        .disabled {
            transition: all var(--speed) var(--easing);
        }
    }
}