/***
Theme Panel
***/

.btn-theme-panel {
    margin-top: 10px; 

    .btn {
        @include opacity(0.6);
        padding: 0 6px;

        > i {
            font-size: 24px;
            color: darken(#697882, 3%); 
        }

        &:hover {
            @include opacity(1);
        }
    }    

    &.open .btn {
         @include opacity(1);   
    }
}

.theme-panel {
    z-index: 1000;  
    min-width: 575px;  
    padding: 20px 10px;
    font-family: $font-family-primary;

    h3 {
        margin: 8px 0 8px 0;
        font-size: 15px;
        padding-left: 12px;
    }

    .seperator {
        border-left:1px solid #EFF2F4;
    }

    .theme-colors {
        list-style: none;
        padding: 0;
        margin: 0;

        > li.theme-color {
            padding: 8px 12px;

            &:hover,
            &.active {
                background: lighten(#EFF2F4, 2%); 
            }

            &:hover {
                cursor: pointer;
            }

            > .theme-color-view {
                float: left;
                margin-top: 0px;
                margin-right: 8px; 
                display: inline-block;
                border-radius: 10px !important;
                height: 20px;
                width: 20px;
            }

            > .theme-color-name {
                display: inline-block;
                color: #777;  
                font-size: 14px;
                font-weight: 300;
                padding-top: -4px; 
            }

            &.theme-color-default .theme-color-view {
                background: #3B3F51;
            }

            &.theme-color-light .theme-color-view {
                background: lighten(#3B3F51, 55%);
            }
        }
    } 

    .theme-settings {
        list-style: none;
        padding: 0;
        margin: 0;

        > li {
            padding: 8px 12px;
            font-size: 14px;
            font-weight: 300;
            color: #777;  

            .form-control {  
                color: #777;  
                margin-top: -3px;
                float: right;
            }
        }
    }
}

@media (max-width: $screen-xs-max) { /* 767px */

    .theme-panel {
        left: 20px;
        right: 20px;
        min-width: 285px; 

        .seperator {
            border: 0;
        }

        .theme-settings {
            .form-control {  
                width: 105px !important;
            }
        }
    }

}