// MENUBAR HEIGHT
$menubar-height: 26px;

// COLORS
$primary-color: #007aff;
$dprimary-color: #185fb4;
$dgrey-color: #757778;
$mgrey-color: #b5b5b6;
$lgrey-color: #e1dedb;
$background-color: #ececec;
$tab-background-color: #e2e2e2;

// GRADIENTS
$button-gradient: linear-gradient($background-color, #e8e9ea);
$disabled-gradient: linear-gradient($lgrey-color, $lgrey-color);

// MARGINS
$widget-margin: 6px;

// PATH
// Base 64 encoded string from :
// <svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><polygon points='40 62, 74 17, 81 33, 40 82, 17 58, 23 44' fill='white'></polygon></svg>
$checkbox-path: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTAwIDEwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cG9seWdvbiBwb2ludHM9JzQwIDYyLCA3NCAxNywgODEgMzMsIDQwIDgyLCAxNyA1OCwgMjMgNDQnIGZpbGw9J3doaXRlJz48L3BvbHlnb24+PC9zdmc+");

// Base 64 encoded string from :
// <svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><polygon points='50 55, 70 35, 70 45, 50 65, 30 45, 30 35' fill='white'></polygon></svg>
$combo-path: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTAwIDEwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cG9seWdvbiBwb2ludHM9JzUwIDU1LCA3MCAzNSwgNzAgNDUsIDUwIDY1LCAzMCA0NSwgMzAgMzUnIGZpbGw9J3doaXRlJz48L3BvbHlnb24+PC9zdmc+");


#app {
    font-family: 'San Francisco', sans-serif;
    font-size: 13px;
    background-color: $background-color;
}

.label {
    margin: $widget-margin;
    font-size: inherit;
    font-family: inherit;
}

.button {
    padding: 7px;
    padding-top: 4px;
    padding-bottom: 4px;
    margin: $widget-margin;
    border: 1px solid $mgrey-color;
    border-radius: 4px;
    background: white;
    color: black;
    outline: 0;
    
    &.disabled {
        background: $lgrey-color;
        color: lighten(black, 50%);
    }

    img {
        height: 18px;
        width: 18px;

        + span {
            margin-left: 10px;
        }
        
    }
}

.progressbar {
    margin-top: 14px;
    margin-bottom: 14px;
    margin-left: $widget-margin;
    margin-right: $widget-margin;
    height: 6px;

    .background {
        background-color: $mgrey-color;
        border: 1px solid $mgrey-color;
        border-radius: 3px;
    }

    .foreground {
        background-color: $primary-color;
        border: 1px solid $primary-color;
        border-radius: 3px;
        min-width: 6px;
    }
}

.textinput {
    margin: $widget-margin;

    input {
        border: 1px solid $mgrey-color;
        border-radius: 4px; 
        margin: 0;
        padding: 7px;
        padding-top: 6px;
        padding-bottom: 5px;
        font-size: inherit;
        font-family: inherit;
        outline: 0;

        &:focus {
            border-color: $primary-color;
        }
    }

    &.disabled {
        input {
            background: $lgrey-color;
            color: lighten(black, 50%);
        }
    }
}

.checkbox {
    margin: $widget-margin;

    label {
        margin-left: $widget-margin;
    }

    .checkbox-outer {
        height: 14px;
        width: 14px;
        background-color: white;
        border: 1px solid $mgrey-color;
        border-radius: 4px;

        .checkbox-inner {
            height: 14px;
            width: 14px;
            background-image: $checkbox-path;
            background-size: 14px 14px;
        }
    }

    &.checked {
        .checkbox-outer {
            background-color: $primary-color;
            border-color: $dprimary-color;
        }
    }

    &.disabled {
        .checkbox-outer {
            border-color: $mgrey-color;
            background-color: $lgrey-color;

            .checkbox-inner {
                visibility: hidden;
            }
        }

        label {
            color: lighten(black, 50%);
        }

        &.checked {
            .checkbox-outer {
                background-color: $mgrey-color;
    
                .checkbox-inner {
                    background-color: transparent;
                    visibility: visible;
                    opacity: 0.5;
                }
            }
        }
    }
}

.radio {
    margin: $widget-margin;

    label {
        margin-left: $widget-margin;
    }

    .radio-outer {
        height: 14px;
        width: 14px;
        background-color: white;
        border: 1px solid $mgrey-color;
        border-radius: 50%;

        .radio-inner {
            height: 6px;
            width: 6px;
            border-radius: 50%;
            background-color: white;
        }
    }

    &.selected {
        .radio-outer {
            background-color: $primary-color;
            border-color: $dprimary-color;
        }
    }

    &.disabled {
        .radio-outer {
            border-color: $mgrey-color;
            background-color: $lgrey-color;

            .radio-inner {
                visibility: hidden;
            }
        }

        label {
            color: lighten(black, 50%);
        }

        &.selected {
            .radio-outer {
                background-color: $mgrey-color;
    
                .radio-inner {
                    visibility: visible;
                    opacity: 0.5;
                }
            }
        }
    }
}

.combo {
    margin: $widget-margin;

    .combo-button {
        padding-left: 7px;
        height: 26px;
        // padding-top: 4px;
        // padding-bottom: 4px;
        border: 1px solid $mgrey-color;
        border-radius: 4px;
        background: white;
        color: black;
        outline: 0;
        position: relative;

        .combo-icon {
            margin-left: 10px;
            height: 28px;
            width: 20px;
            left: 1px;
            background-image: $combo-path;
            background-size: 20px 26px;
            background-color: $primary-color;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
            position: relative;
        }
    }

    .combo-choices {
        box-shadow: 0 0 2px lighten(black, 50%);
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        
        .combo-choice {
            background-color: white;
            padding: 7px;       
            padding-top: 4px;
            padding-bottom: 4px;

            &:hover {
                background-color: $primary-color;
                color: white;
            }
            
            &.last {
                border-bottom-left-radius: 4px;
                border-bottom-right-radius: 4px;
            }
        }
    }

    &.opened {
        .combo-button {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;

            .combo-icon {
                border-bottom-right-radius: 0;
            }
        }
    }

    &.disabled {
        .combo-button {
            background: $lgrey-color;
            color: lighten(black, 50%);

            .combo-icon {
                opacity: 0.4;
            }
        }
    }
}

.range {
    margin-left: $widget-margin;
    margin-right: $widget-margin;
    height: 32px;
    
    .inner-range {

        &::-webkit-slider-runnable-track {
            height: 6px;
            background-color: $mgrey-color;
            border: 1px solid $mgrey-color;
            border-radius: 3px;
        }

        &::-webkit-slider-thumb {
            width: 18px;
            height: 18px;
            background: white;
            border: 1px solid $mgrey-color;
            border-radius: 50%;
            margin-top: -7px;
        }

        &::-ms-track {
            margin-top: 10px;
            margin-bottom: 10px;
            height: 4px;
            background-color: $mgrey-color;
            border: 1px solid $mgrey-color;
            border-radius: 3px;
        }

        &::-ms-thumb {
            width: 16px;
            height: 16px;
            background: white;
            border: 1px solid $mgrey-color;
            border-radius: 50%;
            margin-top: -1px;
        }
    }

    &.disabled {
        .inner-range {
            &::-webkit-slider-thumb {
                background: $lgrey-color;
            }

            &::-ms-thumb {
                background: $lgrey-color;
            }
        }
    }
}

.tabs {
    padding: $widget-margin;

    &.direction-vertical {
        padding: 0;
        
        .tab-titles {
            justify-content: flex-start;
            background-color: $background-color;

            .tab-title {
                margin-bottom: 0;
                border: none;
                background-color: $background-color;

                &.selected {
                    border: none;
                    color: black;
                    background-color: $mgrey-color;
                }

                &.first {
                    border: none;
                    border-radius: 0;
                }
    
                &.last {
                    border: none;
                    border-radius: 0;
                }
            }
        }

        .tab {
            border: none;
            border-radius: 0;
            padding: 0;
            background: white;
        }
    }

    .tab-titles {
        justify-content: center;

        .tab-title {
            margin-bottom: -14px;
            color: black;
            height: 27px;
            padding-left: 10px;
            padding-right: 10px;
            border-top: 1px solid;
            border-bottom: 1px solid;
            background-color: white;
            border-color: $mgrey-color;
            
            &.selected {
                color: white;
                border-color: $primary-color;
                background-color: $primary-color;
            }

            &.first {
                border-top-left-radius: 4px;
                border-bottom-left-radius: 4px;
                border-left: 1px solid;
                border-color: $mgrey-color;

                &.selected {
                    border-color: $primary-color;
                }
            }

            &.last {
                border-top-right-radius: 4px;
                border-bottom-right-radius: 4px;
                border-right: 1px solid;
                border-color: $mgrey-color;

                &.selected {
                    border-color: $primary-color;
                }
            }
        }
    }

    .tab {
        padding-top: 24px;
        border: 1px solid $mgrey-color;
        border-radius: 4px;
        background-color: $tab-background-color;
    }
}

#app {
    .menubar ~ * {
        top: $menubar-height;
    }
}

.menubar {
    height: $menubar-height;
    background-color: $background-color;

    .menuitem {
        
        .menuitem-title {
            box-sizing: border-box;
            padding-left: 11px;
            padding-right: 11px;

            &.selected {
                color: white;
                background-color: $primary-color;
            }
        }

        .menufunctions {
            background-color: $background-color;
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
            border-top-right-radius: 4px;
            box-shadow: 0 0 2px lighten(black, 50%);

            .menufunction {
                padding-top: 6px;
                padding-bottom: 6px;
                padding-left: 11px;
                padding-right: 11px;
                width: 140px;

                &:hover {
                    background-color: $primary-color;
                    color: white;

                    .shortcut {
                        color: white;
                    }
                }

                &.first {
                    border-top-right-radius: 4px;
                }

                &.last {
                    border-bottom-right-radius: 4px;
                    border-bottom-left-radius: 4px;
                }
            }
        }
    }
}
