.uni-button {

    &__sublabel {
        opacity: 0.75;
    }

    &__icon-right {
        margin-left: $input-padding / 2;
    }

    &__inner {
        width: 100%;
        min-height: $input-xs-height;
        font-size: $font-regular;
        letter-spacing: 0.01em;
        line-height: 1;

        border: $border-width solid transparent;
        padding: 0 $input-padding;
        border-radius: $border-radius;

        background-color: transparent;
        color: $color-grey-dark;
        @include transition(background-color, $fast, ease);

        @include mq(sm) {
            min-height: $input-height;
            padding: 0 $input-padding * 2;
        }

        &--default {
            border: solid $border-width $alpha-black-medium;
        }

        &--primary {
            @include button-background($color-primary, true);
        }

        &--error {
            @include button-background($color-error, true);
        }

        &--warning {
            @include button-background($color-warning, true);
        }

        &--success {
            @include button-background($color-success, true);
        }

        &--light {
            color: $black;
            @include button-background($color-grey-medium);

            .uni-button__sublabel{
                color: $black;
            }

        }

        &--only-icon {
            width: $input-height;
            height: $input-height;
            padding: 0;
            border-radius: 50%;
            justify-content: center;

            .uni-button__icon {
                position: absolute;
                @include center(xy);
            }
        }

        &--only-icon-right {
            width: $input-height;
            padding: 0;

            .uni-button__icon-right {
                margin-left: 0;
            }
        }

        /* SIZES */
        &--small {
            font-size: $font-small;
        }

        &--large {
            height: $input-height*2;
            padding: 0 $input-height 0 $input-height;
            text-align: left;

            .uni-button__icon, .uni-button__icon-right {
                top: $basic-padding/2 - $border-width;
            }

            .uni-button__icon {
                left: $basic-padding/2 - $border-width;
            }

            .uni-button__icon-right {
                right: $basic-padding/2 - $border-width;
            }

            .uni-button__sublabel {
                margin-top: $basic-padding / 4;
            }

            &.uni-button__inner--with-icon {
                padding-left: $input-height*2 - $border-width*2;
            }

            &.uni-button__inner--with-icon-right {
                padding-right: $input-height*2 - $border-width*2;
            }

            &.uni-button__inner--only-icon {
                width: $input-height*2;
                height: $input-height*2;
                padding: 0;

                .uni-button__icon {
                    @include center(xy);
                    font-size: 25px;
                }
            }
        }
    }
}