@use "../variable" as *;
@use "../mixin" as *;
@use "sass:map";

$button-sizes: (
    microsmall: (
        height: 24px,
        font-size: 10px,
        font-weight: 400,
        padding: 0 6px,
    ),
    supersmall: (
        height: 28px,
        font-size: 11px,
        font-weight: 400,
        padding: 0 8px,
    ),
    extrasmall: (
        height: 32px,
        font-size: 12px,
        font-weight: 400,
        padding: 0 10px,
    ),
    small: (
        height: 36px,
        font-size: 14px,
        font-weight: 400,
        padding: 0 12px,
    ),
    medium: (
        height: 40px,
        font-size: 15px,
        font-weight: 400,
        padding: 0 14px,
    ),
    large: (
        height: 44px,
        font-size: 18px,
        font-weight: 500,
        padding: 0 16px,
    ),
    extralarge: (
        height: 48px,
        font-size: 20px,
        font-weight: 500,
        padding: 0 20px,
    ),
);

.rbfb-top-level-wrapper {
    .rbfb-button {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
        border: 1px solid transparent;
        font-family: $primary-font;
        transition: all 0.3s ease;
        text-decoration: none;

        @each $size, $props in $button-sizes {
            &.rbfb-button--#{$size} {
                height: map.get($props, height);
                font-size: map.get($props, font-size);
                font-weight: map.get($props, font-weight);
                padding: map.get($props, padding);
            }
        }

        &.rbfb-button--default {
            background-color: transparent;
            &:hover {
                background-color: var(--rbfb-light);
            }
            &:focus {
                background-color: var(--rbfb-light);
            }
        }

        &.rbfb-button--primary {
            background-color: $primary;
            &.not-own-color {
                color: white;
            }
            .rbfb-icon {
                color: currentColor;
            }
            &:hover {
                background-color: $primary-hover;
            }
            &:focus {
                background-color: $primary;
            }
        }

        &.rbfb-button--secondary {
            background-color: $secondary;
            border: 1px solid $secondary;
            &.not-own-color {
                color: $black;
            }
            &:hover {
                background-color: $primary-light;
            }
            &:focus {
                background-color: $secondary;
            }
        }

        &.rbfb-button--outlined {
            background-color: $white;
            border: 1px solid $primary-light;
            &.not-own-color {
                color: $black;
            }
            &:hover {
                background-color: $primary-extralight;
            }
            &:focus {
                background-color: $primary-extralight;
            }
        }

        &.rbfb-button--warning {
            color: $warning;
            background-color: rgba(255, 89, 0, 0.15);
            border: 1px solid $warning-100;
            &:hover {
                background-color: $warning-100;
            }
            &:focus {
                background-color: rgba(255, 89, 0, 0.15);
            }
        }

        &.rbfb-button--error {
            color: $error;
            background-color: rgba(255, 0, 0, 0.15);
            border: 1px solid $error-100;
            &:hover {
                background-color: $error-100;
            }
            &:focus {
                background-color: rgba(255, 0, 0, 0.15);
            }
        }

        &.rbfb-button--link {
            color: $black;
            background: none;
            padding: 0;
            height: auto;
            font-weight: 400;
            border: none;
            text-decoration: none;
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;

            &:focus {
                background-color: transparent;
            }

            &:after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 1px;
                background-color: currentColor;
            }
        }

        &.rbfb-button--gray {
            color: $gray-800;
            background-color: $gray-50;
            border: 1px solid $gray-200;
            &:hover {
                background-color: $gray-100;
            }
            &:focus {
                background-color: $gray-100;
            }
        }

        &.rbfb-button--white {
            color: $gray-800;
            background-color: $white;
            border: 1px solid $white;
        }

        &.rbfb-button--disabled {
            cursor: not-allowed;
            opacity: 0.6;
        }
    }
}
