@mixin light-action-button() {
    color: $light-gray;
    border: 2px solid $light-gray;
    @include light-gray-rgba(0.1);
}

%dmt-btn {
    @include border-radius(12px);
    height: 30px;
    line-height: 28px;
    font-size: 13px;
    text-align: center;
    border: 2px solid $light-blue;
    display: inline-block;
    cursor: pointer;
    margin: 10px 5px;
    min-width: 80px;
    padding: 0 15px;
    text-decoration: none;

    &.dmt-btn-big {
        @include border-radius(15px);
        min-width: 160px;
        height: 36px;
        line-height: 33px;
        font-size: 15px;
    }

    &.dmt-btn-full {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    &.dmt-btn-bg-dark {
        color: #fff;
    }

    &.dmt-btn-icon {
        position: relative;
        text-align: left;
        padding: 0 45px 0 15px;

        span {
            font-size: 12px;
            text-transform: none;
            left: 10px;

            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
            white-space: nowrap;
        }

        i {
            position: absolute;
            top: 0;
            right: 10px;
            color: $dark-gray;
            font-size: 20px;

            &.icon-sort {
                right: 8px;
            }
        }
    }

    &.dmt-disabled {
        color: $medium-gray;
        border-color: $medium-gray !important;
        @include medium-gray-rgba(0.1);
        @include text-shadow(0px 0px 0px, $btn-action-text-shadow);
        @include box-shadow(0px 0px 0px 0px, $btn-action-box-shadow);
        opacity: 0.3;
        background: none !important;
        cursor: default;

        &.dmt-light {
            @include light-action-button();
        }
    }

    &.dmt-btn-2steps {
        position: relative;
        overflow: hidden;

        &.dmt-btn-step2 {
            background-color: $light-blue;
            cursor: default;

            .dmt-btn-step1-content {
                @include transition-property(left);
                @include transition-timing-function(linear);
                @include transition-duration(0.4s);
                left: -400%;
            }

            .dmt-btn-step2-content {
                @include transition-property(left);
                @include transition-timing-function(linear);
                @include transition-duration(0.4s);
                @include transition-delay(0.2s);
                left: 28px;
            }

            .dmt-btn-step2-icon {
                @include transition-property(top);
                @include transition-timing-function(cubic-bezier(1, .26, .84, 1.23));
                @include transition-duration(0.6s);
                @include transition-delay(0.4s);
                top: 0;
                left: -130px;
            }
        }

        .dmt-btn-step1-content {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
        }

        .dmt-btn-step2-content {
            position: absolute;
            left: 400%;
            right: 0;
            top: 0;
        }

        .dmt-btn-step2-icon {
            position: absolute;
            left: -44px;
            right: 0;
            top: -300%;
            font-size: 24px;
        }
    }
}

%dmt-btn-proceed-dark {
    @include light-blue-rgba(0.1);
    @include transition-property(background-color);
    @include transition-timing-function(linear);
    @include transition-duration(0.3s);
    @include box-shadow(0px 0px 0px 0px, $btn-action-box-shadow);
    @include text-shadow(0px 0px 0px, $btn-action-text-shadow);
    background-image: none;
    font-size: 15px;
    border-width: 2px;
    border-color: $light-blue;
}

%dmt-btn-back-dark {
    @include dark-gray-rgba(0.1);
    font-size: 15px;
}

%dmt-btn-action-dark {
    @include online-rgba(0.10);
}

%dmt-btn-control-dark {
    max-width: none;
    border: 1px solid rgb(23, 30, 38);
    position: relative;

    @include border-radius(5px);
    @include box-shadow(inset 0px 1px 1px 0px, rgba(54, 69, 87, 1));
    @include text-shadow(0px 1px 1px, $btn-action-text-shadow);

    background-image: -moz-linear-gradient(-90deg, rgb(42, 54, 68) 0%, rgb(34, 44, 56) 100%);
    background-image: -webkit-linear-gradient(-90deg, rgb(42, 54, 68) 0%, rgb(34, 44, 56) 100%);
    background-image: -ms-linear-gradient(-90deg, rgb(42, 54, 68) 0%, rgb(34, 44, 56) 100%);
}

%dmt-btn-promote-dark {

}

%dmt-btn-remove-dark {
    @include offline-rgba(0.10);
}

.dmt-btn-container {
    position: relative;
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

.dmt-btn-proceed {
    @extend %dmt-btn;
    @include box-shadow(inset 0px 1px 1px 0px, $btn-action-box-shadow);
    @include text-shadow(0px 1px 1px, $btn-action-text-shadow);
    color: #fff;
    background-image: -moz-linear-gradient(-90deg, $btn-action-grad-start 0%, $btn-action-grad-end 100%);
    background-image: -webkit-linear-gradient(-90deg, $btn-action-grad-start 0%, $btn-action-grad-end 100%);
    background-image: -ms-linear-gradient(-90deg, $btn-action-grad-start 0%, $btn-action-grad-end 100%);
    border-color: #438ecc;
    border-width: 1px;

    &.dmt-btn-bg-dark {
        @extend %dmt-btn-proceed-dark;
    }
}

.dmt-btn-back {
    @extend %dmt-btn;
    border-color: $dark-gray;
    color: $dark-gray;

    &.dmt-btn-bg-dark {
        @extend %dmt-btn-back-dark;
    }

}

.dmt-btn-action {
    @extend %dmt-btn;
    color: $light-blue;

    &.dmt-btn-bg-dark {
        @extend %dmt-btn-action-dark;
    }
}

.dmt-btn-control {
    @extend %dmt-btn;
    @include border-radius(5px);
    border-width: 1px;
    border-color: $dark-gray;
    color: $dark-gray;

    &.dmt-btn-bg-dark {
        @extend %dmt-btn-control-dark;
    }
}

.dmt-btn-promote {
    @extend %dmt-btn;
    @include text-shadow(0px 1px 1px, $btn-create-text-shadow);
    color: $dark-blue;
    border: 1px solid rgb(255, 170, 51);
    background-image: -moz-linear-gradient(-90deg, $btn-create-grad-start 0%, $btn-crate-grad-end 100%);
    background-image: -webkit-linear-gradient(-90deg, $btn-create-grad-start 0%, $btn-crate-grad-end 100%);
    background-image: -ms-linear-gradient(-90deg, $btn-create-grad-start 0%, $btn-crate-grad-end 100%);

    &.dmt-btn-bg-dark {
        /* optional extend as dmt-btn-promote-dark is currently empty */
        @extend %dmt-btn-promote-dark !optional;
    }
}

.dmt-btn-remove {
    @extend %dmt-btn;
    border-color: $offline;
    color: $offline;

    &.dmt-btn-bg-dark {
        @extend %dmt-btn-remove-dark;
    }
}

.dmt-dark-background {
    .dmt-btn-proceed {
        &:not(.dmt-btn-bubbly) {
            @extend %dmt-btn-proceed-dark;
        }
    }
    .dmt-btn-back {
        @extend %dmt-btn-back-dark;
    }
    .dmt-btn-action {
        @extend %dmt-btn-action-dark;
    }
    .dmt-btn-control {
        @extend %dmt-btn-control-dark;

        &.dmt-btn-icon {
            > span {
                color: $light-gray;
            }
        }
    }
    .dmt-btn-promote {
        /* optional extend as dmt-btn-promote-dark is currently empty */
        @extend %dmt-btn-promote-dark !optional;
    }
    .dmt-btn-remove {
        @extend %dmt-btn-remove-dark;
    }
}

.dmt-no-touch {

    %dmt-btn {
        &.dmt-disabled {
            &:hover {
                background: none !important;
                cursor: auto;
            }
        }
    }

    %dmt-btn-proceed-dark {
        &:hover {
            background-image: none;
            background-color: $light-blue;
        }
        &:active {
            background-image: none;
            background-color: $light-blue;
        }
    }
    %dmt-btn-back-dark {

    }
    %dmt-btn-action-dark {

    }
    %dmt-btn-control-dark {
        &:hover {
            background-image: -moz-linear-gradient(-90deg, rgb(47, 61, 77) 0%, rgb(42, 54, 69) 100%);
            background-image: -webkit-linear-gradient(-90deg, rgb(47, 61, 77) 0%, rgb(42, 54, 69) 100%);
            background-image: -ms-linear-gradient(-90deg, rgb(47, 61, 77) 0%, rgb(42, 54, 69) 100%);
        }
        &:active {
            background-image: -moz-linear-gradient(-90deg, rgb(34, 44, 56) 0%, rgb(42, 54, 68) 100%);
            background-image: -webkit-linear-gradient(-90deg, rgb(34, 44, 56) 0%, rgb(42, 54, 68) 100%);
            background-image: -ms-linear-gradient(-90deg, rgb(34, 44, 56) 0%, rgb(42, 54, 68) 100%);
        }
    }
    %dmt-btn-promote-dark {

    }

    .dmt-btn-proceed {
        &:hover {
            background-image: -moz-linear-gradient(-90deg, $btn-action-hover-grad-start 0%, $btn-action-hover-grad-end 100%);
            background-image: -webkit-linear-gradient(-90deg, $btn-action-hover-grad-start 0%, $btn-action-hover-grad-end 100%);
            background-image: -ms-linear-gradient(-90deg, $btn-action-hover-grad-start 0%, $btn-action-hover-grad-end 100%);
        }
        &:active {
            background-image: -moz-linear-gradient(-90deg, $btn-action-grad-end 0%, $btn-action-grad-start 100%);
            background-image: -webkit-linear-gradient(-90deg, $btn-action-grad-end 0%, $btn-action-grad-start 100%);
            background-image: -ms-linear-gradient(-90deg, $btn-action-grad-end 0%, $btn-action-grad-start 100%);
        }
    }
    .dmt-btn-back {
        &:hover {
            @include dark-gray-rgba(0.20);
        }
        &:active {
            background: $dark-gray;
            color: #fff;
        }
    }
    .dmt-btn-action {
        &:hover {
            @include light-blue-rgba(0.20);
        }
        &:active {
            background: $light-blue;
            color: #fff;
        }
    }
    .dmt-btn-control {
        &:hover {
            @include dark-gray-rgba(0.20);
        }
        &:active {
            background: $dark-gray;
            color: #fff;
        }

        &.dmt-btn-icon {
            &:active {
                > span {
                    color: $light-gray;
                }

                .icon {
                    color: $light-gray;
                }
            }
        }
    }
    .dmt-btn-promote {
        &:hover {
            background-image: -moz-linear-gradient(-90deg, $btn-create-hover-grad-start 0%, $btn-create-hover-grad-end 100%);
            background-image: -webkit-linear-gradient(-90deg, $btn-create-hover-grad-start 0%, rgb(250, 197, 62) 100%);
            background-image: -ms-linear-gradient(-90deg, $btn-create-hover-grad-start 0%, rgb(250, 197, 62) 100%);
            box-shadow: inset 0 2px 2px 0 rgba(255, 255, 255, 0.004), inset 0px -2px 1px 0 rgba(252, 211, 109, 0.004);
        }
        &:active {
            background-image: -moz-linear-gradient(-90deg, $btn-crate-grad-end 0%, $btn-create-grad-start 100%);
            background-image: -webkit-linear-gradient(-90deg, $btn-crate-grad-end 0%, $btn-create-grad-start 100%);
            background-image: -ms-linear-gradient(-90deg, $btn-crate-grad-end 0%, $btn-create-grad-start 100%);
        }
    }
    .dmt-btn-remove {
        &:hover {
            @include offline-rgba(0.20);
        }
        &:active {
            background: $offline;
            color: #fff;
        }
    }

}