/*--=========================================--
 *  按钮样式
 *  loke 2018-06-30 06:47:56
 *--=========================================--*/

.sui-button {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    height: 40px;
    border-radius: 3px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    overflow: hidden;
    width: 100%;
    border-width: 0;
    outline: 0;
    -webkit-appearance: none;
    >i {
        vertical-align: -1px;
    }
    &:after {
        content: " ";
        width: 200%;
        height: 200%;
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 3px;
        -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        transform-origin: 0 0;
        box-sizing: border-box;
    }
    &:active:after {
        background: rgba(0,0,0,.2);
    }

    &.btn-primary {
        background: #2599f2;
        border-color: #2599f2;
        color: #fff;
        &:hover {
            background: #15a9f2;
            border-color: #15a9f2;
        }
    }
    &.btn-danger {
        background: #f04631;
        border-color: #f04631;
        color: #fff;
        &:hover {
            background: #f55631;
            border-color: #f55631;
        }
    }

    &.disabled {
        border-color: buttonface !important;
        background: buttonface !important;
        color: #999 !important;
        cursor: not-allowed;
        &:active:after {
            background: 0;
        }
    }

    & + .sui-button {
        margin-top: 5px;
    }
}

.sui-button-group {
    display: flex;
    align-items: center;
    justify-content: center;
    .sui-button {
        display: inline-block;
        border-radius: 0;
        border-left: 1px solid #fff;
        &:after {
            display: none;
        }
        &:first-child {
            border-left: 0;
            border-radius: 3px 0 0 3px;
        }
        &:last-child {
            border-radius: 0 3px 3px 0;
        }
        & + .sui-button {
            margin: 0;
        }
    }
}

:global(button) {
    align-items: flex-start;
    text-align: center;
    cursor: default;
    color: #666;
    background-color: #fff;
    box-sizing: border-box;
    border-width: 2px;
    border-style: outset;
    border-color: #eee;
    border-image: initial;
}

:global(input, textarea, keygen, select, button) {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em 0em 0em 0em;
    font: 13.3333px Arial;
}

:global(input, textarea, keygen, select, button, meter, progress) {
    -webkit-writing-mode: horizontal-tb;
}