////
/// Font Styles Control Styles
///
/// @group  CustomizeControls
/// @author Sky Shabatura <theme@sky.camp>
/// @link   https://taproot-theme.com
////


.customize-control-taproot-font-styles {


    .taproot-font-styles {
        @extend %shadow-box;
        display: flex;
        padding: 10px;
    }

    .taproot-font-styles--item,  .taproot-control-reset {

        flex: 1 1 100%;
        height: 34px;
        margin-left: 0;
        margin-right: 10px;
        padding: 0;
        border: none;
        border-radius: 0;
        box-sizing: border-box;        
        box-shadow: none;
        background: #EEEEEE;
        text-align: center;
        cursor: pointer;
        color: #A7A7A7;
        transition: background 0.5s ease-in-out;
        
        &:hover {
            color: white;         
        }

        &:before {
            font-size: 16px;
            line-height: 34px;
            display: inline-block;
            vertical-align: middle;
            speak: none;
            transition: color .5s;
        }  
        
        &:not(.taproot-font-style-checked):hover {
            background: #cacaca;
        }  
        
        &:last-child {
            margin-right: 0;
        }
    }


    .taproot-font-styles--item {

        &.taproot-font-style-checked, &:active {
    
            background: #2e86b9;
            color: #FFF;
        }                            

        .taproot-font-style-checkbox { 
            display: none; 
        }        
    
        &.taproot-font-styles--bold:before { content: "B"; font-weight: bold; }
        &.taproot-font-styles--italic:before { content: "I"; font-style: italic; }
        &.taproot-font-styles--underline:before { content: "U"; text-decoration: underline; }
        &.taproot-font-styles--uppercase:before { content: "TT"; }
        &.taproot-font-styles--capitalize:before { content: "Tt"; }
    }  
    
    .taproot-control-reset {

        &:before { 
            font-family: 'Dashicons'; 
            content: "\f531"; 
            -webkit-font-smoothing: antialiased; 
            -moz-osx-font-smoothing: grayscale; 
        }          
    }

}
