@use '../function' as *;
@use '../mixin';
@use '../settings';
@use 'sass:color';

@mixin roolith-button() {
    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: var(--r-global-base-font);
        text-decoration: none;
        cursor: pointer;
        border-radius: var(--r-button-radius);
        font-size: rem(14);
        line-height: normal;
        min-width: rem(60);
        text-align: center;
        padding: rem(9) rem(20);
        position: relative;
        background-color: var(--r-button-default-background);
        background: linear-gradient(
            to bottom,
            var(--r-button-default-background) 0%,
            var(--r-button-default-background-end) 100%
        );
        border: rem(1) solid var(--r-button-default-border);
        color: var(--r-button-default-color);
        @include mixin.transition('background, color, box-shadow');

        &:hover {
            background-color: var(--r-button-default-hover-background);
            background: linear-gradient(
                to bottom,
                var(--r-button-default-hover-background) 0%,
                var(--r-button-default-hover-background-end) 100%
            );
            border: rem(1) solid var(--r-button-default-hover-border);
            box-shadow: var(--r-button-hover-shadow);
            color: var(--r-button-default-hover-color);
        }

        &.active {
            box-shadow: var(--r-button-active-shadow);
        }

        &.button-outline {
            background: transparent;
        }

        &.button-text {
            background: transparent;
            border-color: transparent;
            font-weight: var(--r-global-font-bold-weight);

            &:hover {
                background-color: var(--r-button-default-hover-background);
                box-shadow: none;
            }
        }

        &.disabled {
            @include mixin.opacity(0.6);
            cursor: not-allowed;
            pointer-events: none;

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

        .icon {
            display: inline-block;
            margin-right: rem(5);
            line-height: 1;
        }

        &.loading {
            text-indent: -9999px;
            cursor: wait;
            pointer-events: none;

            &:after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                @include mixin.loader();
                @extend .loader;
            }
        }
    }

    .button-rounded {
        border-radius: rem(25);
        min-width: rem(120);
    }

    .button-small {
        font-size: rem(12);
        min-width: rem(50);
        padding: rem(5) rem(10);

        &.loading:after {
            @include mixin.loader(12);
        }
    }

    .button-medium {
        font-size: rem(12);
        min-width: rem(50);
        padding: rem(6) rem(12);

        &.loading:after {
            @include mixin.loader(16);
        }
    }

    .button-large {
        font-size: rem(16);
        min-width: rem(80);
        padding: rem(11) rem(30);

        .icon {
            margin-right: rem(10);
        }

        &.loading:after {
            @include mixin.loader(24);
        }
    }

    @each $name, $value in settings.$colors {
        @if ($name != white) {
            .button-#{'' + $name} {
                background: var(--r-color-#{$name});
                background: linear-gradient(
                    to bottom,
                    color-lighten(var(--r-color-#{$name}), 5%) 0%,
                    var(--r-color-#{$name}) 100%
                );
                color: var(--r-color-white);
                border: rem(1) solid color-darken(var(--r-color-#{$name}), 5%);

                &:hover {
                    background: color-lighten(var(--r-color-#{$name}), 3%);
                    background: linear-gradient(
                        to bottom,
                        color-lighten(var(--r-color-#{$name}), 7%) 0%,
                        color-lighten(var(--r-color-#{$name}), 3%) 100%
                    );
                    border: rem(1) solid var(--r-color-#{$name});
                    box-shadow: var(--r-button-hover-shadow-dark);
                    color: var(--r-color-white);
                }

                &.active {
                    box-shadow: var(--r-button-active-dark-shadow);
                }

                &.button-outline {
                    background: transparent;
                    color: var(--r-color-#{$name});

                    &:hover {
                        background: color-lighten(var(--r-color-#{$name}), 3%);
                        color: var(--r-color-white);
                    }
                }

                &.button-text {
                    background: transparent;
                    border-color: transparent;
                    color: var(--r-color-#{$name});

                    &:hover {
                        background-color: var(--r-button-default-hover-background);
                        color: var(--r-color-#{$name});
                    }
                }

                &.loading:after {
                    border: rem(2) solid rgba(255, 255, 255, 0.3);
                    border-top-color: rgb(255, 255, 255);
                }

                .icon {
                    background-color: var(--r-color-white);
                }
            }
        }
    }

    .button-group {
        @include mixin.clearfix();

        .button {
            float: left;
            border-radius: 0;
            margin-right: rem(-1);
            min-width: auto;

            &:first-child {
                @include mixin.border-left-radius(var(--r-button-radius));
                @include mixin.border-top-radius(var(--r-button-radius));
            }

            &:last-child {
                @include mixin.border-right-radius(var(--r-button-radius));
                @include mixin.border-bottom-radius(var(--r-button-radius));
            }
        }
    }

    .button-has-icon {
        gap: rem(20);
    }

    .button-icon {
        gap: rem(5);
    }

    .button-bundle {
        display: flex;
        gap: rem(10);
    }

    .button-block {
        width: 100%;
    }
}