@smartface-blue: #3399CC;
@smartface-dark-blue: darken(@smartface-blue, 20%);
@smartface-light-blue: lighten(@smartface-blue, 20%);
@dark-theme-text-color: rgb(176, 177, 170);
@light-theme-text-color: rgb(143, 143, 143);
@dark-theme-outer-border: rgb(70, 70, 70);
@light-theme-outer-border: rgb(208, 208, 208);
@dark-background: rgb(48, 49, 48);
@light-background: #FBFBFB;
@react-select-item-count: 5;
@light-border-color: #cccccc;
@dark-border-color: #464646;
@border-radius: 0px;
@classnameitem-height: 20px;
@classnameitem-width: 100px;
@modifiedColor: #cc6c09;
@saveIconPassiveColor: #4e4e4e;

.alignHorizontally {
    display: flex;
    align-items: stretch;
    justify-content: center;

    &>input {
        width: 12px !important;
        height: 18.5px !important;
    }
}

.theme-select-background {
    background-color: #303130;
    & when (@preferences-flat) {
        background-color: white;
    }
}

.theme-selectinput-background-color {
    & when (@preferences-flat) {
        background-color: @light-background;
    }
    & when not (@preferences-flat) {
        background-color: @dark-background;
    }
}

.themes-textColor {
    & when (@preferences-flat) {
        color: @light-theme-text-color;
    }
    & when not (@preferences-flat) {
        color: @dark-theme-text-color;
    }
}

.themes-border {
    & when (@preferences-flat) {
        border-color: @light-border-color !important;
    }
    & when not (@preferences-flat) {
        border-color: @dark-border-color !important;
    }
}

.themes {
    overflow-y: auto;
    height: 100%;
    display: flex;
    align-items: stretch;
    &>div {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    &-hint {
        & when (@preferences-flat) {
            background-color: rgb(251, 251, 251);
            color: #b0b1aa;
            border-color: #cccccc;
        }
        & when not (@preferences-flat) {
            background-color: rgb(48, 48, 48);
            color: #b0b1aa;
            border-color: #464646;
        }
        width: 260px;
        padding: 10px;
        border-width: 1px;
        border-style: double;
        font-size: 10px;
        &-icon {
            background: url("@{image-path}/info.png") no-repeat;
            background-size: 14px;
            height: 16px;
            width: 16px;
            margin-top: 4px;
            margin-left: 4px;
        }
        &-wrapper {
            right: 43px;
        }
        &-main {
            background: url("@{image-path}/info.png") no-repeat;
            background-size: 14px;
            height: 16px;
            width: 100%;
            margin-top: 4px;
            margin-right: 158px;
        }
    }
    input {
        border: none;
        padding: 0px;
        background-color: transparent;
        color: rgb(176, 177, 170);
        font: inherit;
        width: 100%;
        height: 100%;
        font: inherit;
        font-size: 10px;
        outline: none;
        border-image: none;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    input[type=number]::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    &-classnameselector {
        &-grid {
            display: flex;
            align-items: stretch;
            justify-content: flex-start;
            flex-wrap: wrap;
            padding: 8px;
            overflow: auto;
            max-height: 100px;
        }
        &-sortableHelper {
            z-index: 1000;
            background-color: #3399cc30;
            opacity: 0.8;
            cursor: move !important;
        }
        &-classnameitem {
            &_root {
                &-button {
                    align-self: center;
                    width: 14px;
                    height: 14px;
                    background-size: 42px 28px;
                    background-image: url("@{image-path}/close_tab_btn@2x.png");
                    & when (@preferences-flat) {
                        background-position: 0 0;
                        &:hover {
                            background-position: -14px 0px;
                        }
                    }
                    & when not (@preferences-flat) {
                        background-position: 0 -13px;
                        &:hover {
                            background-position: -13px -13px;
                        }
                    }
                }
                & when not (@preferences-flat) {
                    color: #dddddd;
                }
                margin: 5px;
                position: relative;
                height: @classnameitem-height;
                min-width: 70px;
                display: flex;
                align-items: stretch;
                flex-direction: row;
                justify-content: center;
                line-height: @classnameitem-height;
                text-align: left;
                font-size: 10px;
                border-radius: @border-radius;
                border: 1px solid white;
                cursor: default;
                & when (@preferences-flat) {
                    border-color: @light-border-color;
                }
                & when not (@preferences-flat) {
                    border-color: @dark-border-color;
                }
                &_modified {
                    border-color: @modifiedColor;
                }
                &_wrongInput {
                    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
                    transform: translate3d(0, 0, 0);
                    backface-visibility: hidden;
                    perspective: 1000px;
                    border-color: rgb(144, 0, 0) !important;
                    outline-color: rgb(144, 0, 0) !important;
                }
                &_selected {
                    border-color: @smartface-dark-blue;
                    outline: 1px solid @smartface-dark-blue;
                }

                &_dragHandle {
                    position: absolute;
                    height: 5px;
                    width: 100%;
                    left: 0;
                    right: 0;
                    top: 0;
                    margin: auto;
                }
                &_state {
                    display: none;
                    position: absolute;
                    top: -1px;
                    left: -1px;
                    width: @classnameitem-height;
                    height: @classnameitem-height;
                    border-radius: @border-radius;
                    border-top-right-radius: 0;
                    border-bottom-right-radius: 0;
                    +div {
                        margin-left: 5px !important;
                        padding-right: 30px;
                        width: 100% !important;
                        cursor: inherit;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        //white-space: pre;
                        &>span {
                            cursor: inherit;
                        }
                    }
                    & when (@preferences-flat) {
                        border: 1px solid @light-border-color;
                    }
                    & when not (@preferences-flat) {
                        border: 1px solid @dark-border-color;
                    }
                }
                &_remove {
                    display: flex;
                    width: @classnameitem-height;
                    height: 100%;
                    margin-right: 2px;
                    justify-content: flex-end;
                    position: absolute;
                    right: 0px;
                    i {
                        align-self: center;
                        opacity: 0.7;
                        color: #ADADAD;
                        font-family: Arial, Helvetica, sans-serif;
                        font-size: smaller;
                        line-height: 14px;
                        font-style: normal;
                        cursor: default;
                        &:hover {
                            opacity: 1;
                            & when (@preferences-flat) {
                                color: @smartface-light-blue;
                            }
                            & when not (@preferences-flat) {
                                color: white;
                            }
                        }
                    }
                }
            }
        }
    }
    &-seperator {
        height: 2px;
        margin-left: 8px;
        margin-right: 8px;
        margin-top: 10px;
        margin-bottom: 10px;
        &-outer {
            & when (@preferences-flat) {
                background: rgb(208, 208, 208);
            }
            & when not (@preferences-flat) {
                // dark
                background: rgb(39, 41, 42);
            }
            margin: 0px;
            height: 1px;
        }
        &-inner {
            & when (@preferences-flat) {
                background: rgb(235, 235, 235);
            }
            & when not (@preferences-flat) {
                // dark
                background: rgb(56, 56, 56);
            }
            margin: 0px;
            height: 1px;
        }
    }
    &-themeselection-dropdown {}
    &-button {
        display: inline-block;
        cursor: pointer;
        font-size: 11px;
        font-family: Arial;
        min-height: 25px;
        margin: 20px;
        outline: none;
        & when not (@preferences-flat) {
            // dark
            background-color: @dark-background;
            border: 1px solid @dark-theme-outer-border;
            color: @dark-theme-text-color;
        }
        & when (@preferences-flat) {
            // light
            background-color: @light-background;
            border: 1px solid @light-theme-outer-border;
            color: @light-theme-text-color;
        }
    }
    &-option {
        &-wrapper {
            display: flex;
            margin: 10px 7px;
            position: relative;
            flex-grow: 6;
            justify-content: flex-start;
            min-width: 20px;
        }
        &-header {
            min-width: 50px;
            text-align: right;
            padding-right: 7px;
            line-height: 25px;
            font-size: 11px;
            cursor: default;
            word-wrap: break-word;
            white-space: pre;
            color: @light-theme-text-color;
            user-select: none;
            & when not (@preferences-flat) {
                // dark
                color: @dark-theme-text-color;
            }
        }
        &-header-current {
            min-width: 50px;
            text-align: right;
            padding-right: 7px;
            font-size: 11px;
            cursor: default;
            word-wrap: break-word;
            white-space: pre-wrap;
            line-height: 13px;
            max-width: 30px;
            color: @light-theme-text-color;
            & when not (@preferences-flat) {
                // dark
                color: @dark-theme-text-color;
            }
        }
        &-dropdown {
            &-wrapper {
                &-outer {
                    height: 100%;
                    width: 100%;
                    display: flex;
                    position: relative;
                    min-width: 40px;
                    justify-content: center;
                    align-items: stretch;
                    min-height: 25px;
                    border: 1px solid @light-theme-outer-border;
                    & when not (@preferences-flat) {
                        // dark
                        border: 1px solid @dark-theme-outer-border;
                    }
                }
                &-inner {
                    min-width: 40px;
                    position: relative;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-self: center;
                    align-items: center;
                }
            }
            &-select {
                -webkit-appearance: none;
                height: 25px;
                width: 100%;
                font-size: calc(10px);
                padding-left: 7px;
                padding-right: 25px;
                outline: none;
                background-color: rgba(48, 49, 48, 0);
                color: #8f8f8f;
                top: 0px;
                left: 0px;
                bottom: 0px;
                right: 0px;
                margin: auto;
                position: absolute;
                border: none;
                & when not (@preferences-flat) {
                    // dark
                    background-color: @dark-background;
                    color: rgb(195, 195, 195);
                }
            }
            &-icon {
                display: flex;
                align-items: center;
                padding-right: 8px;
                pointer-events: none;
                top: 3px;
                right: 0px;
                bottom: 0px;
                margin: auto;
                position: absolute;
                height: @classnameitem-height;
            }
            &-new {
                &-wrapper {
                    min-width: 40px;
                    position: relative;
                    width: 100%;
                    color: rgb(176, 177, 170);

                    &>div {
                        width: 100%;
                        cursor: default;
                        &>input {
                            text-align: left;
                            cursor: text;
                            max-width: 100%;
                        }
                        &>div {
                            max-height: 300px;
                            position: relative;
                            overflow-x: hidden;
                            overflow-y: auto;
                            z-index: 1;
                            background-color: rgb(188, 188, 188);
                            color: #000000;
                            text-align: left;
                            cursor: default;
                            .active {
                                background: rgb(18, 99, 209);
                                color: #FFFFFF;
                            }
                            &>div {
                                position: relative;
                                padding-left: 10px;
                                padding-right: 10px;
                                cursor: default;
                                text-overflow: ellipsis;
                                line-height: @classnameitem-height;
                                white-space: pre;
                                overflow: hidden;
                            }
                        }
                    }
                    &>i {
                        position: absolute;
                        color: gray;
                        right: 17px;
                        top: 3px;
                    }
                }
            }
        }
    }
    &-breadcrumb {
        &-main {
            &-inner {
                cursor: default;
                position: relative;
                min-height: 15px;
                color: #3399CC;
                padding: 0px;
                padding-left: 9px;
                margin: auto;
                white-space: pre;
                text-overflow: ellipsis;
                overflow: hidden;
                &-save {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: absolute;
                    top: -40px;
                    bottom: 0;
                    right: 12px;
                    margin: auto;
                    color: @saveIconPassiveColor;
                    &>span {
                        margin-right: 5px;
                    }
                    &-modified {
                        color: @modifiedColor;
                    }
                    &>i {
                        color: inherit;
                        opacity: 0.7;
                        transition-timing-function: cubic-bezier(0.175, 0.665, 0.320, 1), linear;
                        transition: all 0.3s;
                        font-size: 55px;
                        font-family: serif;
                        width: 14px;
                        height: 14px;
                        &:hover {
                            opacity: 1;
                        }
                    }
                }
            }
            &-outer {
                height: 25px;
                line-height: 25px;
                & when (@preferences-flat) {
                    padding: 3px;
                }
            }
        }
        &-category {
            &-commands {
                background-color: transparent;
                margin-left: 18px;
                &-seperator {
                    margin-left: 18px;
                }
            }
            background-color: rgb(241,
            241,
            241);
            & when not (@preferences-flat) {
                border-color: rgb(169, 169, 169);
                background-color: rgb(44, 44, 44);
            }
            font-size: 11px;
            background-repeat: no-repeat;
            background-position: 95% center;
            color: rgb(51,
            153,
            204);
            height: 29px;
            line-height: 29px;
            padding-left: 13px;
            cursor: default;
            display: flex;
            align-items: center;
            white-space: pre;
            &-seperator {
                height: 1px;
                & when (@preferences-flat) {
                    background: #DEDEDE;
                }
                & when not (@preferences-flat) {
                    background: #27292A;
                }
            }
            &-title {
                position: relative;
                white-space: pre;
                overflow: hidden;
                width: 100%;
                margin-right: 5px;
                text-overflow: ellipsis;
            }
            &-selector {
                width: 100% !important;
                border-width: 0px !important;
                line-height: 29px;
            }
            &-additem {
                background-image: url("@{image-path}/plus.svg");
                background-repeat: no-repeat;
                background-size: contain;
                height: 14px;
                width: 14px;
                &-locked {
                    background-image: url("@{image-path}/padlock-white.png");
                }
                &-save {
                    background-image: url("@{image-path}/save.svg");
                }
                &-wrapper {
                    margin: auto;
                    margin-right: 11px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    &-modified {
                        color: @modifiedColor;
                    }
                    &>i {
                        color: inherit;
                        opacity: 0.7;
                        transition-timing-function: cubic-bezier(0.175, 0.665, 0.320, 1), linear;
                        transition: all 0.3s;
                    }
                }
            }
        }
    }
    &-propertygroup {
        padding: 13px;
        padding-right: 0px;
        overflow-y: auto;
        height: auto;
        overflow-x: hidden;
        margin-right: 7px;
        &-propertyfield {
            &-root {
                display: flex;
                position: relative;
                height: calc(@classnameitem-height + 2px);
                margin-bottom: 4px;
                border-bottom: 1px solid;
                .themes-border;
                &-selector {
                    display: flex;
                    width: 45%;
                    position: relative;
                    justify-content: flex-start;
                    align-items: center;
                    text-align: left;
                    i {
                        position: absolute;
                        color: gray;
                        right: 4px;
                        height: 14px;
                        width: 9px;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                    }
                    &>span {
                        margin-left: 2px;
                        color: rgb(176, 177, 170);
                        font-size: 10px;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                    &>div {
                        width: 100%;
                        position: relative;
                        font: inherit;
                        margin-left: 2px;
                        height: 100%;
                        &>div {
                            max-height: 200px;
                            position: absolute;
                            overflow-x: hidden;
                            overflow-y: auto;
                            z-index: 1;
                            cursor: default;
                            background-color: rgb(188, 188, 188);
                            color: #000000;
                            text-align: left;
                            .active {
                                background: rgb(18, 99, 209);
                                color: #FFFFFF;
                            }
                            &>div {
                                width: 100%;
                                position: relative;
                                cursor: default;
                                height: 20px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                &>span {
                                    margin-left: 10px;
                                    line-height: 20px;
                                    text-overflow: ellipsis;
                                }
                            }
                        }
                    }
                }
                &-inputcomp {
                    position: relative;
                    padding-left: 10px;
                    display: flex;
                    align-items: stretch;
                    justify-content: flex-start;
                    background-color: transparent;
                    width: 55%;
                    text-align: center;
                    font-size: 10px;
                    line-height: @classnameitem-height;
                    color: #b0b1aa;
                    border-left: 1px solid white;
                    border-color: #464646a1 !important;
                    .themes-textColor;
                    .themes-border;
                    .active-content {
                        & when (@preferences-flat) {
                            color: @smartface-light-blue;
                        }
                        & when not (@preferences-flat) {
                            color: white;
                        }
                    }
                    i {
                        position: absolute;
                        color: gray;
                        width: 9px;
                        height: 14px;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                        z-index: -1;
                    }
                    div {
                        flex-grow: 1;
                        position: relative;
                    }
                    input {
                        width: 100%;
                        height: 100%;
                        font: inherit;
                        background-color: transparent;
                        border: none;
                        outline: none;
                        -webkit-appearance: none;
                        text-align: left;
                        color: inherit;
                    }
                    select {
                        -webkit-appearance: none;
                        border: none;
                        color: inherit;
                        outline: none;
                        background-color: transparent;
                        font: inherit;
                        padding-right: 20px;
                        width: 100%;
                        option {
                            .theme-selectinput-background-color;
                        }
                    }
                    &>div {
                        width: 100%;
                        position: relative;
                        font: inherit;
                        height: 100%;
                        &>div {
                            max-height: 400px;
                            position: absolute;
                            overflow-x: hidden;
                            overflow-y: auto;
                            z-index: 1;
                            cursor: default;
                            background-color: rgb(188, 188, 188);
                            color: #000000;
                            width: 100%;
                            text-align: center;
                            .active {
                                background: rgb(18, 99, 209);
                                color: #FFFFFF;
                            }
                            &>div {
                                width: 100%;
                                position: relative;
                                cursor: default;
                                height: 20px;
                                line-height: 20px;
                            }
                        }
                    }
                }
                .buttoninput {
                    display: flex;
                    padding-left: 10px;
                    width: 55%;
                    align-items: center;
                    text-align: center;
                    justify-content: flex-start;
                    user-select: none;
                    cursor: default;
                    border-left: 1px solid white;
                    .themes-textColor;
                    .themes-border;
                    .active-content {
                        & when (@preferences-flat) {
                            color: @smartface-light-blue;
                        }
                        & when not (@preferences-flat) {
                            color: white;
                        }
                    }
                    &-content {
                        height: 14px;
                        border: 1px solid;
                        .themes-border;
                    }
                }
                &>i {
                    .themes-textColor;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    right: 0;
                    margin: auto;
                    height: 14px;
                    width: 14px;
                    margin-left: 6px;
                    opacity: 0.8;
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: large;
                    font-style: normal;
                    transform: rotate(45deg);
                    cursor: default;
                    z-index: 2;
                    &:hover {
                        opacity: 1;
                        & when (@preferences-flat) {
                            color: @smartface-light-blue;
                        }
                        & when not (@preferences-flat) {
                            color: white;
                        }
                    }
                }
            }
        }
    }
    &-commands {
        &-root {
            padding: 18px;
            margin-bottom: 0px;
            padding-right: 0px;
            margin-right: 7px;
        }
    }
}

.themesContainer {
    .black_dropdown {
        width: ~"calc(100% - 20px)" !important;
        margin: 10px;
        .button {}
        .lbl {}
    }
}

.themeSelector {
    margin-left: 10px;
    margin-right: 10px;
    &>div {
        &>div {
            &>div {
                color: black;
                text-align: center;
                padding: 0px;
            }
        }
    }
}

.themesContainer{
    
    input::selection{
        background-color: rgba(0,161,241,0.3);
    }
}


@keyframes shake {
    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}