.#{$uiName}-button-groups {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    button {
        @include border-radius(0);
        justify-content: center;

        &:first-child {
            @include border-radius-left(3px);
        }

        &:last-child {
            @include border-radius-right(3px);
        }
    }

    &.center {
        justify-content: center;

    }

    &.left {
        justify-content: flex-start;
    }

    &.right {
        justify-content: flex-end;
    }

    &.fluid {
        width: 100%;
        justify-content: center;

        button {
            flex-grow: 1;
        }
    }
}

.#{$uiName}-button {
    display: inline-flex;
    align-items: center;
    @include border-radius(3px);
    background: map-get($jump-ui-color-default, 'background');
    color: map-get($jump-ui-color-default, 'color');
    border: 1px solid map-get($jump-ui-color-default, 'background');
    outline: none;
    padding: 0 20px;
    cursor: pointer;
    position: relative;

    &.fluid {
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    &.loading {
        & > :not(.loading) {
            opacity: 0;
        }
    }

    .icon-ui {
        padding: 0 10px;

        &.loading {
            position: absolute;
            left: 50%;
            top: 50%;
            @include transform(translate(-50%, -50%));

        }

        svg {
            color: map-get($jump-ui-color-default, 'color');
        }
    }

    &:hover, &:focus, &.active {
        @include background(map-get($jump-ui-color-default, 'background'), 3%, 'dark');
    }

    /*&.huge-ui {
        height: map-get($huge-size, 'height');
        font-size:  map-get($huge-size, 'font');

        .button-text-ui {
            font-size: 1em;
        }

        .icon-ui {
            font-size: .8em;
        }
    }*/

    &.large-ui {
        height: map-get($large-size, 'height');
        font-size:  map-get($large-size, 'font');

        .button-text-ui {
            font-size: 1em;
        }

        .icon-ui {
            font-size: .8em;
        }
    }

    &.default-ui {
        height: map-get($default-size, 'height');
        font-size:  map-get($default-size, 'font');

        .button-text-ui {
            font-size: 1em;
        }

        .icon-ui {
            font-size: .8em;
        }
    }

    &.medium-ui {
        height: map-get($medium-size, 'height');
        font-size:  map-get($medium-size, 'font');

        .button-text-ui {
            font-size: 1em;
        }

        .icon-ui {
            font-size: .8em;
        }
    }

    &.small-ui {
        height: map-get($small-size, 'height');
        font-size:  map-get($small-size, 'font');

        .button-text-ui {
            font-size: 1em;
        }

        .icon-ui {
            font-size: .8em;
        }
    }

    &.tiny-ui {
        height: map-get($tiny-size, 'height');
        font-size:  map-get($tiny-size, 'font');

        .button-text-ui {
            font-size: 1em;
        }

        .icon-ui {
            font-size: .8em;
        }
    }

    @each $item in $jumpUiColors {
        &.button-#{map-get($item, 'name')} {
            background: map-get($item, 'background');
            color: map-get($item, 'color');
            border: 1px solid map-get($item, 'background');

            svg {
                color: map-get($item, 'color');
            }

            &:hover, &:focus, &.active {
                @include background(map-get($item, 'background'), 3%, 'dark');
            }

            &.line {
                background: transparent;
                color: map-get($item, 'background');
                border: 2px solid map-get($item, 'background');

                svg {
                    color: map-get($item, 'background');
                }

                &:hover, &:focus, &.active {
                    @include background(map-get($item, 'background'), 3%, 'dark');
                    color: map-get($item, 'color');

                    svg {
                        color: map-get($item, 'color');
                    }
                }
            }

            &.disabled {
                pointer-events: none;
                cursor: not-allowed;
                opacity: .5;
            }


        }
    }

}