sakura/resources/assets/less/yuuno/bem/input.less

.input {
    &__button {
        box-sizing: border-box;
        background: linear-gradient(0deg, #9475B2 10%, #C2AFFE 90%);
        color: #306;
        padding: 4px 8px;
        text-decoration: none;
        border-radius: 2px;
        margin: 4px 2px;
        display: inline-block;
        font-size: 1.3em;
        border: 1px solid #9475B2;
        cursor: pointer;
        text-decoration: none !important;

        &--disabled {
            background: linear-gradient(0deg, #787878 10%, #858585 90%) #858585 !important;
            color: #444 !important;
            cursor: not-allowed;
        }

        &--current {
            background: linear-gradient(0deg, #A586C3, #D3BFFF);
        }

        &--danger {
            background: repeating-linear-gradient(-45deg, #B33, #B33 10px, #B00 10px, #B00 20px);
            color: #fff;
            border: 1px solid #C00;
            box-shadow: 0 0 3px #C00, inset 0 0 3px #C00;

            &:hover,
            &:active {
                color: #fff !important;
                background: repeating-linear-gradient(-45deg, #B00, #B00 10px, #B33 10px, #B33 20px) !important;
            }
        }

        &--frozen {
            color: #306 !important;
        }

        &:not(.input__button--frozen) {
            &:hover {
                color: #306;
                background: linear-gradient(0deg, #9475B2 30%, #C2AFFE 70%);
            }

            &:active {
                color: #306;
                background: linear-gradient(180deg, #9475B2 30%, #C2AFFE 70%);
            }
        }
    }

    &__select {
        box-sizing: border-box;
        background: linear-gradient(180deg, #FFF 0%, #EEE 50%, #E5E5E5 50%) #FFF;
        border: 1px solid #CCC;
        box-shadow: inset #DDD 0 0 5px;
        padding: 3px 4px;
        vertical-align: middle;
    }

    &__text {
        box-sizing: border-box;
        width: 100%;
        padding: 3px 4px;
        border: 1px solid #CCC;
        box-shadow: inset #DDD 0 0 5px;
        background: linear-gradient(180deg, #FFF 0%, #EEE 50%, #E5E5E5 50%) #FFF;

        &--red {
            box-shadow: inset 0 0 7px #EB5959;
        }

        &--green {
            box-shadow: inset 0 0 7px #A9EC8B;
        }
    }

    &__range {
        border: 0;
        width: 100%;
        font-size: 1.5em;
        margin: 5px 0;
    }
}