body,
button {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }

/* Layout */

.makeup {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483647;
    background: #4e4d4b;
    color: #fff;
    text-align: left;
    white-space: normal;
    word-spacing: 0px;
    letter-spacing: normal;
    font: 20px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: normal;
    direction: ltr;
    }

    .makeup__menu {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 2;
        overflow: hidden;
        height: 2em;
        background: #363535;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .7);
        user-select: none;
        }

    .makeup__aside {
        position: absolute;
        top: 2em;
        bottom: 1.1em;
        left: 0;
        z-index: 1;
        overflow: hidden;
        width: 10em;
        background: #1e1e1e;
        color: #fff;
        font: 20px/1 'Helvetica Neue', Helvetica, Arial, sans-serif;
        transition: transform .3s ease;
        transform: translate(0, 0) translateZ(0);
        user-select: none;

        .makeup--sidebar-false > & {
            transform: translate(-100%, 0) translateZ(0);
            }
        }

        .makeup__aside-in {
            overflow-y: scroll;
            height: 100%;

            &::-webkit-scrollbar {
                width: 0;
                }
            }

            .makeup__aside-track {
                position: absolute;
                top: 1px;
                right: 1px;
                bottom: 1px;
                display: none;
                width: 4px;

                .makeup__aside--baron & {
                    display: block;
                    }
                }

                .makeup__aside-track-bar {
                    position: absolute;
                    right: 0;
                    z-index: 1;
                    width: 4px;
                    background: rgba(255, 255, 255, .4);
                    }


    .makeup__status {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        overflow: hidden;
        padding: 0 1em;
        height: 1.8em;
        background: #363535;
        box-shadow:
            0 -1px 0 0 rgba(0, 0, 0, .4),
            inset 0 1px 0 0 rgba(255, 255, 255, .1);
        color: #bbb;
        font: .6em/1.9 Helvetica, Arial, sans-serif;
        user-select: none;
        }

    .makeup__main {
        position: absolute;
        top: 2em;
        right: 0;
        bottom: .75em;
        left: 10em;
        overflow-x: hidden;
        overflow-y: auto;
        transition: left .3s ease;
        transform: translateZ(0);

        .makeup--sidebar-false > & {
            left: 0;
            }

        .makeup--bg-transparency & {
            .bgi('i_grid');
            }
        }


/* Ruler */

.makeup__ruler {
    position: absolute;
    z-index: 10;
    overflow: hidden;
    user-select: none;

    &--h {
        top: 0;
        right: 0;
        left: 0;
        padding: 0 0 0 40px;
        height: .75em;
        background: #242424;
        }

    // &--v {
    //     top: .75em;
    //     bottom: 0;
    //     left: 0;
    //     width: .75em;
    //     background: #242424;
    //     }
    }

    .makeup__ruler-track {
        position: relative;
        width: 2000px;
        height: .75em;
        background:
            linear-gradient(to right,
                transparent 10%,
                #898989 10%,
                #898989 11%,
                transparent 11%,
                transparent 20%,
                #898989 20%,
                #898989 21%,
                transparent 21%,
                transparent 30%,
                #898989 30%,
                #898989 31%,
                transparent 31%,
                transparent 40%,
                #898989 40%,
                #898989 41%,
                transparent 41%,
                transparent 50%,
                #898989 50%,
                #898989 51%,
                transparent 51%,
                transparent 60%,
                #898989 60%,
                #898989 61%,
                transparent 61%,
                transparent 70%,
                #898989 70%,
                #898989 71%,
                transparent 71%,
                transparent 80%,
                #898989 80%,
                #898989 81%,
                transparent 81%,
                transparent 90%,
                #898989 90%,
                #898989 91%,
                transparent 91%,
                transparent 100%
            ) 0 10px repeat-x;
        background-size: 100px 2px;
        }

        .makeup__ruler-track-in {
            counter-reset: scale -1;
            }

            .makeup__ruler-track-point {
                position: absolute;
                z-index: 1;
                width: 0;
                height: .75em;

                &:first-child {
                    visibility: hidden;
                    }
                }

            .makeup__ruler-track-point:before {
                display: inline-block;
                margin-left: -1.5em;
                width: 3em;
                content: counter(scale)'00';
                counter-increment: scale;
                vertical-align: top;
                text-align: center;
                letter-spacing: -.1ex;
                font: .5em/1.5em 'Helvetica Neue', Helvetica, Arial, sans-serif;
                }

            .makeup__ruler-track-active {
                position: absolute;
                top: 0;
                left: 0;
                height: .75em;
                background: #3a3a3a;
                background-size: 10px 2px;
                }

            .makeup__ruler-track-runner {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 2;
                width: 0;
                height: 0;

                &:before {
                    .bg('i_dragger-h');
                    position: absolute;
                    top: 1px;
                    left: -7px;
                    content: '';
                    }
                }
            .makeup__ruler-track-runner--disabled {
                pointer-eveents: none;
                }


    .makeup__container {
        position: absolute;
        top: .75em;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: auto;
        }

        .makeup__container-in {
            position: absolute;
            top: 40px;
            left: 40px;
            width: 400px;
            height: 300px;
            color: #000;
            font: 16px/1 Times, serif;
            transform-origin: 0 0;
            }

        .makeup--smiley-true .makeup__container-in {
            color: red;
            font: 100px/1 'Comic Sans';
            }

            .makeup__container-image {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                }

                .makeup__container-image-regular {
                    display: block;

                    .makeup--mode-2 &,
                    .makeup--mode-4 & {
                        display: none;
                        }
                    }

                .makeup__container-image-inverse {
                    display: none;

                    .makeup--mode-4 & {
                        display: block;
                        }
                    }

            .makeup__container-markup {
                position: absolute;
                top: 0;
                right: 0;
                // bottom: 0;
                left: 0;
                background: white;
                transform: scale(1);

                .makeup--mode-1 & {
                    display: none;
                    }
                }


/* Button */

.makeup__btn {
    display: inline-block;
    margin: .2em;
    height: 1.6em;
    vertical-align: middle;
    white-space: nowrap;
    }

    .makeup__btn-checkbox {
        display: none;
        }

    .makeup__btn-label {
        position: relative;
        display: inline-block;
        overflow: hidden;
        box-sizing: border-box;
        width: 1.6em;
        height: 100%;
        border-radius: 2px;
        vertical-align: middle;
        text-indent: -999em;
        cursor: pointer;
        transition: background .2s ease;

        &:before {
            position: absolute;
            top: 50%;
            left: 50%;
            content: '';
            }

        &:hover {
            background: #4e4d4b;
            }

        .makeup__btn-checkbox:checked + & {
            background: #000;
            box-shadow: inset 0 0 0 1px #202020;
            }
        }

    .makeup__btn-label--sidebar:before {
        .bg('i_menu');
        margin: -6px 0 0 -8px;
        }
    .makeup__btn-label--smiley:before {
        .bg('i_smiley');
        margin: -8px 0 0 -8px;
        }
    .makeup__btn-label--full:before {
        .bg('i_smiley');
        margin: -8px 0 0 -8px;
        transform: rotate(180deg);
        }


/* Search */

.makeup__search {
    position: relative;
    display: inline-block;
    margin: 0 0 0 -.25em;
    width: 8em;
    height: 1.6em;
    vertical-align: middle;
    }

    .makeup__search-input {
        display: inline-block;
        box-sizing: border-box;
        padding: .3em 1em .3em 1.5em;
        width: 100%;
        height: 100%;
        border: 1px solid #444242;
        border-radius: 3px;
        background: #2b2a29;
        box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, .6);
        color: #efefef;
        font: .7em/1em 'Helvetica Neue', Helvetica, Arial, sans-serif;
        // transition:
        //     border-color .05s ease,
        //     box-shadow .05s ease,
        //     background-color .05s ease;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        &:focus {
            outline: none;
            // border-color: #64b4c8;
            // background: #4e4d4b;
            // box-shadow:
            //     inset 0 1px 2px 0 rgba(0, 0, 0, .6),
            //     0 0 4px 0 #5996a5;
            }
        }

    .makeup__search-icon {
        .bg('i_search');
        position: absolute;
        top: 50%;
        left: .3em;
        z-index: 1;
        margin-top: -5px;
        }


/* Radio */

.makeup__radio {
    display: inline-block;
    padding: 0 .25em 0 .75em;
    vertical-align: middle;
    }

    .makeup__radio-title {
        display: inline-block;
        margin-right: .4em;
        color: #ccc;
        vertical-align: middle;
        font-size: .7em;
        }

    .makeup__radio-item {
        display: inline-block;
        vertical-align: middle;
        }

        .makeup__radio-item-input {
            display: none;
            }

        .makeup__radio-item-label {
            position: relative;
            display: inline-block;
            overflow: hidden;
            margin: .2em -.15em;
            width: 1.6em;
            height: 1.6em;
            border-radius: 2px;
            vertical-align: middle;
            text-indent: -999em;
            cursor: pointer;

            &:before {
                position: absolute;
                top: 50%;
                left: 50%;
                content: '';
                }

            &:hover {
                background: #4e4d4b;
                }

            .makeup__radio-item-input:checked + & {
                border-radius: 3px;
                background: #000;
                box-shadow: inset 0 0 0 1px #202020;
                }
            }

        /* Blend modes */
        .makeup__radio-item-label--blend-1:before,
        .makeup__radio-item-label--blend-2:before,
        .makeup__radio-item-label--blend-3:before,
        .makeup__radio-item-label--blend-4:before {
            margin: -8px 0 0 -9px;
            }
        .makeup__radio-item-label--blend-1:before {
            .bg('i_blend-1');
            }
        .makeup__radio-item-label--blend-2:before {
            .bg('i_blend-2');
            }
        .makeup__radio-item-label--blend-3:before {
            .bg('i_blend-3');
            }
        .makeup__radio-item-label--blend-4:before {
            .bg('i_blend-4');
            }

        /* Background */
        .makeup__radio-item-label--bg-color:before,
        .makeup__radio-item-label--bg-transparency:before {
            margin: -8px 0 0 -8px;
            }
        .makeup__radio-item-label--bg-color:before {
            .bg('i_bg-color');
            }
        .makeup__radio-item-label--bg-transparency:before {
            .bg('i_bg-transparency');
            }
        .makeup__radio-item-label--bg-map:before {
            .bg('i_bg-map');
            margin: -7px 0 0 -8px;
            }


/* Slider */

.makeup__slider {
    display: inline-block;
    padding: 0 .25em 0 .2em;
    vertical-align: middle;

    &:before {
        display: inline-block;
        height: 1.6em;
        content: '';
        vertical-align: middle;
        }
    }

    .makeup__slider-title {
        display: inline-block;
        margin-right: .4em;
        color: #ccc;
        vertical-align: middle;
        font-size: .7em;
        }

    .makeup__slider-track {
        position: relative;
        display: inline-block;
        margin: 0 0 0 8px;
        width: 60px;
        height: 1px;
        border-top: 1px solid #000;
        background: #444;
        vertical-align: middle;
        }

        .makeup__slider-track-in { }

            .makeup__slider-track-runner {
                position: absolute;
                z-index: 1;
                width: 0;
                height: 0;

                &:active {
                    z-index: 2;
                    }

                &:before {
                    position: absolute;
                    top: -8px;
                    left: -7px;
                    width: 15px;
                    height: 16px;
                    border-radius: 2px;
                    background: #555;
                    background: linear-gradient(to top, #555, #444);
                    box-shadow: 0 1px 3px 0 #000;
                    content: '';
                    }
                &:after {
                    position: absolute;
                    top: -4px;
                    left: -3px;
                    width: 5px;
                    height: 8px;
                    border-right: 1px solid #252525;
                    border-left: 1px solid #252525;
                    background: linear-gradient(to right, #252525, #252525) center center repeat-y;
                    background-size: 1px 1px;
                    content: '';
                    }
                }


/* Navigation */
.makeup__nav {
    padding-bottom: 2em;
    }

    .makeup__nav-title {
        margin: .875em 0 .625em 1em;
        font: bold .8em/1.25em 'Helvetica Neue', Helvetica, Arial, sans-serif;
        }

    .makeup__nav-list { }


/* Item (module, block, type, subtype, etc) */
.makeup__item {
    user-select: none;

    & > & {
        padding-left: 13px;
        }

    .makeup__item--expandable > & { // nested item
        display: none;
        }
    .makeup__item--expanded > & {
        display: block;
        }

    &--hidden,
    .makeup__item--expanded > &--hidden { // need specify 020+ for hiding children of expanded items
        display: none;
        }


    }


    .makeup__item-header {
        position: relative;
        padding: 0 0 0 2.5em;
        color: #eee;
        white-space: nowrap;
        font: .6em/1.7em 'Helvetica Neue', Helvetica, Arial, sans-serif;
        cursor: pointer;

        .makeup__item--expandable > &:before {
            .bg('i_expand');
            position: absolute;
            top: 50%;
            left: 18px;
            margin-top: -4px;
            content: '';
            }

        .makeup__item--expanded > &:before {
            .bg('i_expanded');
            left: 17px;
            margin-top: -3px;
            }

        .makeup__item--current > &:before {
            background: #656565;
            background: linear-gradient(to top, #4d4d4d 6%, #5d5d5d 6%, #6d6d6d 94%, #7e7e7e 94%);
            content: '';
            position: absolute;
            width: 200%;
            right: 0;
            top: 0;
            bottom: 0;
            }

        .makeup__item--highlight > & {
            font-weight: bold;
            }

        .makeup__item--matched > & {
            color: #fff;
            font-weight: bold;
            }
        }

        .makeup__item-header-in {
            width: 100%;
            max-width: 100%;
            }

            .makeup__item-header-meta {
                height: 1.7em;
                float: right;
                }

            .makeup__item-header-inner { }

                .makeup__item-header-inner {
                    position: relative;
                    overflow: hidden;
                    white-space: nowrap;
                    }

                    .makeup__item-header-title {
                        display: inline-block;
                        overflow: hidden;
                        max-width: 100%;
                        vertical-align: top;
                        text-overflow: ellipsis;
                        }

/* Module rating */
.makeup__rating {
    display: inline-block;
    padding: 0 1em 0 0;
    width: 1.5em;
    color: #666;
    vertical-align: middle;
    font: bold .75em/2.2em 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }

/* Module doc links */
.makeup__doc {
    padding: 0 10px 0 0;
    height: 100%;
    font-size: 0;
    line-height: 0;

    &:before {
        display: inline-block;
        width: 2px;
        height: 100%;
        content: '';
        vertical-align: middle;
        }
    }
    .makeup__doc-link {
        position: relative;
        display: inline-block;
        width: 16px;
        height: 16px;
        vertical-align: middle;
        opacity: .5;
        transition: opacity .2s linear;

        &:before {
            .bg('i_info');
            position: absolute;
            top: 3px;
            left: 3px;
            content: '';
            }

        &:hover {
            opacity: 1;
            }
        }
