@use "../variable" as *;
@use "../mixin" as *;

$icon-button-sizes: (
    microsmall: 24px,
    supersmall: 28px,
    extrasmall: 32px,
    small: 36px,
    medium: 40px,
    large: 44px,
    extralarge: 48px,
);

.rbfb-top-level-wrapper {
    .rbfb-icon-button {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-family: $primary-font;
        transition: all 0.3s ease;
        background: transparent;

        @each $size, $value in $icon-button-sizes {
            &.rbfb-icon-button--#{$size} {
                width: $value;
                height: $value;
            }
        }

        &.rbfb-icon-button--default {
            color: $black;

            &:hover {
                background-color: var(--rbfb-light);
            }
            &:focus {
                background-color: var(--rbfb-light);
            }
        }

        &.rbfb-icon-button--primary {
            color: $white;
            background-color: $primary;

            &:hover {
                background-color: $primary-hover;
            }
            &:focus {
                background-color: $primary;
            }
        }

        &.rbfb-icon-button--secondary {
            color: $black;
            background-color: $secondary;

            &:hover {
                background-color: $primary-light;
            }
            &:focus {
                background-color: $secondary;
            }
        }

        &.rbfb-icon-button--outlined {
            color: $black;
            border: 1px solid $primary-light;

            &:hover {
                background-color: $primary-extralight;
            }
            &:focus {
                background-color: $primary-extralight;
            }
        }

        &.rbfb-icon-button--white {
            color: $primary;
            background-color: $white;

            &:focus {
                background-color: $white;
            }
        }

        &.rbfb-icon-button--warning {
            color: $warning;
            background-color: rgba(255, 89, 0, 0.15);

            &:hover {
                background-color: $warning-100;
            }
            &:focus {
                background-color: rgba(255, 89, 0, 0.15);
            }
        }

        &.rbfb-icon-button--error {
            color: $error;
            background-color: rgba(255, 0, 0, 0.15);

            &:hover {
                background-color: $error-100;
            }
            &:focus {
                background-color: rgba(255, 0, 0, 0.15);
            }
        }

        &.rbfb-icon-button--link {
            color: $black;
            background: none;
            border: none;
            padding: 0;
            text-decoration: none;
            width: auto;
            height: auto;

            &:focus {
                background-color: transparent;
            }

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

        &.rbfb-icon-button--light {
            color: $black;
            background-color: $primary-light;
            border: 1px solid $primary-light;

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

        &.rbfb-icon-button--gray {
            color: $black;
            background-color: $gray-50;
            border: 1px solid $gray-200;

            &:hover {
                background-color: $gray-100;
            }
            &:focus {
                background-color: $gray-100;
            }
        }

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