$btn-action-grad-start: rgb(84, 178, 255);
$btn-action-grad-end: rgb(63, 134, 191);
$btn-action-text-shadow: rgba(14, 29, 41, 0.5);
$btn-action-box-shadow: rgba(255, 255, 255, 0.4);
$btn-action-hover-grad-start: rgb(135, 215, 255);
$btn-action-hover-grad-end: rgb(67, 142, 204);

$btn-create-grad-start: rgb(255,216,115);
$btn-crate-grad-end: rgb(198,156,50);
$btn-create-text-shadow: rgba(255, 255, 255, 0.5);

$btn-create-hover-grad-start: rgb(255,226,153);
$btn-create-hover-grad-end: rgb(250,197,62);

.dmt-options-group {
    font-size: 0;
    color: $medium-gray;
    text-align: center;

    .dmt-option {
        display: inline-block;
        border: 2px solid $light-blue;
        border-right-width: 0;
        font-size: 14px;
        text-align: center;
        height: 30px;
        line-height: 26px;
        min-width: 60px;

        &:last-child {
            border-right-width: 2px;
        }

        &.dmt-active {
            background-color: $light-blue;
            color: $light-gray;
        }
    }
}

.dmt-action-button-wrapper {
    margin: 60px auto 40px;
}

.dmt-action-button {
    width: 100%;
    max-width: 280px;
    height: 36px;
    color: $light-blue;
    border: 2px solid $light-blue;
    @include light-blue-rgba(0.1);
    @include border-radius(15px);
    text-align: center;
    line-height: 30px;
    font-size: 15px;
    padding: 0;
    margin: 24px auto;
    display: block;
    cursor: pointer;

    @include css3-prefix('user-select', 'none');

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

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

    &.dmt-offline {
        color: $light-gray;
        border: 2px solid $offline;
        @include offline-rgba(0.1);
    }

    &.dmt-disabled {
        color: $medium-gray;
        border: 2px solid $medium-gray;
        @include medium-gray-rgba(0.1);
        opacity: 0.3;
        cursor: default;

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

    &.dmt-small {
        width: auto;
        font-size: 11px;
        height: 26px;
        padding: 0 20px;
        border-radius: 12px;
        line-height: 22px;
        border-width: 1px;
        display: inline-block;
    }

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

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

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

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

            .dmt-button-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;
            }
        }

        .dmt-button-step1-content {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            line-height: 42px;
        }

        .dmt-button-step2-content {
            position: absolute;
            left: 400%;
            right: 0;
            top: 0;
            line-height: 42px;
        }

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

    &.dmt-new-ui {
        /* todo: should use variables! */
        border: 1px solid #438ecc;
        font-size: 13px;

        @include border-radius(15px);
        @include box-shadow(inset 0px 2px 1px 0px, $btn-action-box-shadow);
        @include text-shadow(0px 1px 1px, $btn-action-text-shadow);

        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%);

        text-transform: uppercase;
        color: $light-gray;
        line-height: 36px;

        &.dmt-remove{
            /* todo: should use variables! */
            border: 1px solid #7d224d;
            background-image: -moz-linear-gradient( -90deg, rgb(204,50,120) 0%, rgb(148,40,90) 100%);
            background-image: -webkit-linear-gradient( -90deg, rgb(204,50,120) 0%, rgb(148,40,90) 100%);
            background-image: -ms-linear-gradient( -90deg, rgb(204,50,120) 0%, rgb(148,40,90) 100%);
        }

        &.dmt-action-button-create {
            border: 1px solid $btn-crate-grad-end;
            @include text-shadow(0px 1px 1px, $btn-create-text-shadow);
            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%);
            color: $dark-blue;
        }

        &.dmt-disabled {
            /* todo: should use variables! */
            color: #8A8D99;
            border: 2px solid #8A8D99;
            background-color: rgba(138, 141, 153, .1);
            background-image: none;
            opacity: .3;

            @include box-shadow(inset 0px 0px 0px 0px, rgba(255, 255, 255, 0));
            @include text-shadow(0px 0px 0px, rgba(14, 29, 41, 0.5));
        }

    }

    &.dmt-cancel-button{
        border: 2px solid $dark-gray;
        color: $dark-gray;
        background: #fff;
    }
}

.dmt-dark-background {
    .dmt-action-button {
        color: $light-gray;
    }
}

.dmt-more {
    color: $medium-gray;
    font-size: 15px;
    text-decoration: underline;
}

/* All hover effects for non-touch devices */
.dmt-no-touch {
    .dmt-action-button {
        &.dmt-offline {
            &:hover {
                color: $light-gray;
                background-color: $offline;
            }
        }

        &.dmt-new-ui {
            &.dmt-action-button-create {
                &: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);

                    &.dmt-disabled {
                        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%);
                    }
                }
            }
            &.dmt-remove{
                &:hover {
                    background-image: -moz-linear-gradient( -90deg, rgb(255,89,164) 0%, rgb(201,54,123) 100%);
                    background-image: -webkit-linear-gradient( -90deg, rgb(255,89,164) 0%, rgb(201,54,123) 100%);
                    background-image: -ms-linear-gradient( -90deg, rgb(255,89,164) 0%, rgb(201,54,123) 100%);
                }
            }

            &: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%);
            }

            &.dmt-disabled {
                &:hover {
                    background-image: none;
                }
            }
        }

        &.dmt-cancel-button {
            &:hover {
                @include dark-gray-rgba(0.10);
            }
        }
    }

    .dmt-add-button {
        &:hover {
            background-image: -moz-linear-gradient( -90deg, rgb(84,178,255) 0%, rgb(59,125,179) 100%);
            background-image: -webkit-linear-gradient( -90deg, rgb(84,178,255) 0%, rgb(59,125,179) 100%);
            background-image: -ms-linear-gradient( -90deg, rgb(84,178,255) 0%, rgb(59,125,179) 100%);

            .dmt-button-icon {
                background-image: none;
                border: 1px solid $light-blue;
                @include css3-prefix('box-shadow', 'none');
                border-right: 0;
            }

            .dmt-button-label {
                color: $light-gray;
            }
        }
    }
}

.dmt-add-button {
    line-height: 30px;
    height: 30px;
    border: 1px solid $light-blue;
    background-color: transparent;
    cursor: pointer;

    padding-left: 35px;
    position: relative;

    @include border-radius(13px);
    @include box-shadow(inset 0px 2px 1px 0px, rgba(255, 255, 255, 0.4));

    .dmt-button-icon {
        border: 1px solid #438ecc;
        @include box-shadow(inset 0px 2px 1px 0px, rgba(255, 255, 255, 0.4));
        @include border-radius(13px);
        @include text-shadow(0px 1px 1px, rgba(14, 29, 41, 0.5));

        @include css3-prefix('border-bottom-right-radius', 0);
        @include css3-prefix('border-top-right-radius', 0);

        display: inline-block;
        height: 30px;
        width: 35px;
        position: absolute;
        top: -1px;
        left: -1px;
        text-align: center;
        color: $light-gray;

        background-image: -moz-linear-gradient( -90deg, rgb(84,178,255) 0%, rgb(59,125,179) 100%);
        background-image: -webkit-linear-gradient( -90deg, rgb(84,178,255) 0%, rgb(59,125,179) 100%);
        background-image: -ms-linear-gradient( -90deg, rgb(84,178,255) 0%, rgb(59,125,179) 100%);

        > span {
            font-size: 20px;
            display: block;
            position: relative;
            top: -3px;
            left: 1px;
        }
    }

    .dmt-button-label {
        color: $dark-gray;
        text-decoration: none;
        text-align: center;
        line-height: 28px;

        > span {
            position: relative;
            left: -6px;
            padding: 0 16px;
        }
    }
}