@mixin button($name, $primary-color, $font-color, $secondary-color, $secondary-font-color, $icon-color, $disbled-color, $disbled-font-color, $color-default-icon: false) {
    .btn-#{$name} {
        transition: all 200ms ease;
        background-color: $primary-color;
        border-color: $primary-color;
        color: $font-color;
        text-decoration: none;

        &[disabled] {
            background-color: $disbled-color;
            border-color: $disbled-color;
            color: $disbled-font-color;

            &:active, &:focus, &:hover, &:focus, &:active:focus, &:active:hover {
                background-color: darken($disbled-color, 3%);
                border-color: lighten($disbled-color, 3%);
                color: $disbled-font-color;
            }
        }

        &:focus, &:hover, &:active, &:active:hover, &:active:focus {
            background-color: darken($primary-color, 4%);
            border-color: darken($primary-color, 4%);
            color: $font-color;
        }

        @if $color-default-icon {
            i {
                color: $icon-color;
            }

            span {
                font-weight: 600;
            }
        }

        &.btn-outline {
            background-color: transparent;
            color: $secondary-font-color;

            i {
                color: $icon-color;
                margin-right: 0;
            }

            i + span {
                margin-left: 4px;
            }

            &:focus, &:hover, &:active, &:active:hover, &:active:focus {
                background-color: $secondary-color;
            }

            &[disabled] {
                background-color: $disbled-color;
                border-color: $disbled-color;
                color: $disbled-font-color;

                &:active, &:focus, &:hover, &:focus, &:active:focus, &:active:hover {
                    background-color: darken($disbled-color, 3%);
                    border-color: $disbled-color;
                }
            }
        }
    }

    .open {
        .dropdown-toggle.btn-#{$name} {
            background-color: darken($primary-color, 3%);
            border-color: darken($primary-color, 3%);
            color: $font-color;

            &:hover, &:focus {
                background-color: darken($primary-color, 3%);
                border-color: darken($primary-color, 3%);
                color: $font-color;
            }
        }
    }

    .buttons-tabbed .btn-#{$name}.btn-outline {
        background-color: lighten($secondary-color, 5%);
    }
}

@include button('default', $gray-color, $light-color, $table-hover-row-background-color, $main-text-color, $accent-color, $btn-disabled-color, $btn-disbled-font-color);
@include button('primary', $accent-color, $light-color, $table-hover-row-background-color, $main-text-color, $accent-color, $btn-disabled-color, $btn-disbled-font-color);
@include button('success', $success-color, $light-color, $table-hover-row-background-color, $main-text-color, $accent-color, $btn-disabled-color, $btn-disbled-font-color);
@include button('danger', $accent-color, $light-color, $table-hover-row-background-color, $main-text-color, $accent-color, $btn-disabled-color, $btn-disbled-font-color);
@include button('checkbox', $light-color, $main-text-color, $table-hover-row-background-color, $main-text-color, $accent-color, $btn-disabled-color, $btn-disbled-font-color);
@include button('ghost', transparent, $main-text-color, $table-hover-row-background-color, $main-text-color, $accent-color, $btn-disabled-color, $btn-disbled-font-color, true);

.btn {
    border-radius: 0;
}

.btn-full {
    width: 100%;
}

.btn-checkbox {
    border-color: $divider-color;

    span.visible-icon {
        color: $accent-color;
    }
}

.btn-active {
    color: $accent-color;
}

.buttons-ribbon {
    padding-left: 0;
    padding-right: 0;

    &.floating-buttons {
        position: absolute;
        z-index: 10;
        right: 15px;
        top: 0;
    }

    a, button, .btn-group {
        margin-left: 8px;

        &.m-l {
            margin-left: 15px;
        }
    }
}

.buttons-tabbed {
    padding-left: 0;
    padding-right: 0;
    position: absolute;
    z-index: 14;
    right: 0;
    top: 0;
    background-color: lighten($table-hover-row-background-color, 5%);

    .btn {
        font-size: 14px;
        padding: 12.5px 15px;
        border-left: 1px solid $divider-color;
        border-bottom: 0;
        border-top: 0;
        border-right: 0;
        font-weight: 600;

        &[disabled], &:active, &:focus, &:hover, &:focus, &:active:focus, &:active:hover {
            border-left-color: $divider-color;
        }
    }

    .btn-group {
        font-weight: 600;

        button {
            font-size: 14px;
            padding: 12.5px 15px;
            border: 0;

            &:not(.dropdown-toggle) {
                border-left: 1px solid $divider-color;
                padding-right: 5px;

                &.btn-outline {
                    border-left: 1px solid $divider-color
                }
            }

            &:last-child {
                padding-left: 5px;
            }

            &[disabled] {
                &:not(.dropdown-toggle) {
                    border-left: 1px solid $divider-color;
                }
            }

            &.dropdown-toggle {
                @media (max-width: $max-screen-sm) {
                    padding-left: 6px;
                    padding-right: 10px;
                }
            }
        }
    }

    a.close-btn {
        font-size: 20px;
        padding: 12.5px 20px;
        line-height: 14px;
        border: 0;
    }

    .task-buttons-row {
        width: auto;
        display: inline-block;
    }

    .switch-container {
        font-size: 13.5px;
        padding: 13px 12px 7px 12px;
        border-left: 1px solid $divider-color;
        border-bottom: 0;
        border-top: 0;
        border-right: 0;
        font-weight: 600;

        &[disabled], &:active, &:focus, &:hover, &:focus, &:active:focus, &:active:hover {
            border-left-color: $divider-color;
        }
    }
}

.nav:not(.horizontal-menu) {
    & + div .buttons-ribbon.floating-buttons {
        right: 30px;
        top: 7px;
    }
}

.attachment-icon {
    display: inline-block;
    vertical-align: middle;
    margin-top: -1px;
    height: 15px;
    width: 15px;

    &:after {
        content: "";
        display: inline-block;
        background-size: contain;
        background-repeat: no-repeat;
        height: 15px;
        width: 15px;
        background-image: url(../Icons/Izvoz.png);
    }
}

.btn-group {
    .dropdown-menu {
        border-radius: 0;
        margin-top: 1px;

        a {
            border-radius: 0;
            margin: 0;
            padding: 5px 20px;
        }
    }
}

a.disabled {
    pointer-events: none;
    cursor: default;
}

.btn-ghost.btn-ghost-default {
    i {
        color: $main-text-color;
    }
}

.btn-transparent {
    background-color: transparent;
    border: 0;
    color: $secondary-text-color;

    &:active {
        box-shadow: none;
    }
}

.buttons-tabbed .btn-transparent {
    background-color: lighten($secondary-color, 5%);
}

.btn-link:hover, .btn-link:focus, .btn-link:active, .btn-link.active {
    color: $accent-color;
}

.create-document-from-order {
    min-width: 160px;
}

.btn-table-action {
    width: 42px;
    height: 42px;
    padding: 10px;
}

.btn-bg-default {
    background-color: $input-background-color;
}

.btn-tabs-dropdown {
    height: 47px;
    background-color: $input-background-color;
    border: 0;
    border-bottom: 2px solid $divider-color;
    border-left: 2px solid $divider-color;

    &:focus, &:hover, &:active, &:active:hover, &:active:focus {
        background-color: $input-background-color;
    }
}

.btn-nav {
    border-radius: 4px;
    border-color: $divider-color;
}

.btn-set-border-radius {
    border-radius: 4px;
}

.active > .btn-nav {
    background-color: darken($table-hover-row-background-color, 4%);
    border-color: $accent-color;
}