.semantic.smui {
    @highlight: rgba(33, 150, 243, 0.9);
    @lightgray: rgba(0, 0, 0, .05);
    @gray: #CCC;
    @white: #FFF;

    /*线性渐变*/
    .gradient {
        background: linear-gradient(@white, @lightgray);
    }

    /*交互效果*/ 
    .interactive {
        border-radius: 2px;
        border: 1px solid @gray;
        &:hover{
            border: 1px solid @highlight;
        }
    }

    /*定义可交互组件*/
    .command-list,
    .drop-list,
    .date-picker {
        .gradient;
        .interactive;
    }

    button,
    .button {
        border-radius: .25rem;
        background-color: #E0E1E2;
        text-shadow: none;
        border: none;
        background-image: none;
        
        &:hover,
        &.active {
            background-color: #CACBCD;
            background-image: none;
            box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;
            color: rgba(0,0,0,.8);
            border: none;
        }

        /* .primary for highlight of focused */
        &.primary {
            background-color: @highlight;
            color: @white;
            border: none;
            &:hover {
                background-color: #1678c2;
                box-shadow: none;
                color: @white;
            }
        }

        /* .plain for unfocus of discard*/
        &.plain {
            border: none;
            background: none;
        }

        &:disabled,
        &.disabled {
            border: 1px solid #c8c8c8;
            background: @lightgray;
            color: #999;
            &:hover {
                border: 1px solid #c8c8c8;
                background: @lightgray;
                color: #999;
            }
        }
    }
    .dialog {
        border-radius: 4px;
        .header {
            border-radius: 4px 4px 0 0;
        }
    }
}

/**
 * checkbox 样式定制
 */
.semantic.smui {
    @highlight: rgba(33, 150, 243, 0.9);
    @lightgray: rgba(0, 0, 0, .05);
    @gray: #CCC;
    @white: #FFF;
    input[type="checkbox"], 
    input[type="radio"] {
        appearance: none;
        -webkit-appearance: none;
        background: url("//image.uc.cn/s/uae/g/2p/smui/dist/checked.png");
        background-size: 60px;
        background-clip: content-box;
    }
    input[type="checkbox"] {
        background-position: -15px 0;
        &:checked {
            background-position: 0px 0; 
        }
        &:disabled {
            background-position: -30px 0;
        }
        &:indeterminate {
            background-position: -45px 0;
        }
    }
    input[type="radio"] {
        background-position: -15px -15px;
        &:checked {
            background-position: 0 -15px; 
        }
        &:disabled {
            background-position: -30px -15px;
        }
    }
}

/**
 * 翻页组件样式定制
 */
.semantic.smui {
    @highlight: rgba(33, 150, 243, 0.9);
    @lightgray: rgba(0, 0, 0, .05);
    @gray: #CCC;
    @white: #FFF;
    .pagination {
        background: #FFF;

        .item:first-child {
            border-radius: .2em;
        }
        .item:last-child {
            border-radius: .2em;
        }

        .item:hover,
        .active.item {
            box-shadow: none;
            color: @white;
            background: @highlight;
        }

        .item.disabled,
        .item.disabled:hover {
            cursor: default;
            background-color: #EEE;
            color: rgba(40, 40, 40, 0.3);
        }
    }
}

/**
 * 日历组件样式定制
 */
.semantic.smui {
    @highlight: rgba(33, 150, 243, 0.9);
    @lightgray: rgba(0, 0, 0, .05);
    @gray: #CCC;
    @white: #FFF;

    .calendar {
        td.valid {
            color: @highlight;
            font-size:12px;
        }

        td.selected {
            color: @white;
            background-color: @highlight;
            font-size: 12px;
        }

        .month-item {
            &.selected,
            &:hover {
                background-color: @highlight;
                color: #FFF;
            }
        }

        .month-select>i:hover{
            color: @highlight;
        }
    }

    .date-picker {
        .range-type {
            a:hover,
            .active {
                color: @highlight;
            }
        }
        .sm-calender {
            color: #333;
        }
        .date-input {
            background-color: #FFF;
        }
    }  
}