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

.rbfb-top-level-wrapper {
    .rbfb-notice-card {
        border: 1px solid;
        text-align: center;
        padding: 10px;
        margin: 0 auto;
        max-width: 600px;
        box-shadow: 0 0 20px 2px #9898982b;

        &-wrapper {
            width: 100%;
            min-height: 300px;
            background: $white;
            padding: var(--rbfb-space-5) 30px 30px 30px;
            gap: clamp(10px, 2vw, 20px);

            &-icon {
                font-size: clamp(50px, 10vw, 100px);
            }

            .rbfb-icon {
                font-family: "rbfb-icon" !important;
                font-size: clamp(50px, 10vw, 100px);
                line-height: 1;

                &:before {
                    font-size: clamp(50px, 10vw, 100px);
                    line-height: 1;
                }

                &.rbfb-folder {
                    &::before {
                        content: "folder";
                    }
                }

                &.rbfb-gallery {
                    &::before {
                        content: "imagesmode";
                    }
                }

                &.rbfb-crown {
                    &::before {
                        content: "eicon-upgrade-crown";
                    }
                }

                &.rbfb-editor-list-ul {
                    &::before {
                        content: "event_list";
                    }
                }

                &.rbfb-media-player {
                    &::before {
                        content: "stock_media";
                    }
                }

                &.rbfb-slider-carousel {
                    &::before {
                        content: "slideshow";
                    }
                }

                &.rbfb-search-box {
                    &::before {
                        content: "feature_search";
                    }
                }

                &.rbfb-embed-document {
                    &::before {
                        content: "text_compare";
                    }
                }

                &.rbfb-shortcode {
                    &::before {
                        content: "code";
                    }
                }
            }

            &-content {
                gap: 10px;

                .rbfb-title,
                .rbfb-description {
                    margin: 0;
                }

                .rbfb-title {
                    @extend .text-2xl, .font-semibold, .text-black;
                }

                .rbfb-description {
                    @extend .text-sm, .font-normal, .text-black;
                }
            }

            &-buttons {
                .rbfb-notice-card-btn {
                    text-decoration: none;

                    .rbfb-icon {
                        font-size: 16px;
                        font-family: "rbfb-icon" !important;
                    }
                }
            }
        }

        &.rbfb-notice-status-error {
            border-color: $error-100;
            background: $error-50;

            .rbfb-notice-card-wrapper-icon {
                color: $error;
            }
        }

        &.rbfb-notice-status-warning {
            border-color: $warning-100;
            background: $warning-50;

            .rbfb-notice-card-wrapper-icon {
                color: $warning;
            }
        }

        &.rbfb-notice-status-primary {
            border-color: $primary-light;
            background: $primary-extralight;

            .rbfb-notice-card-wrapper-icon {
                color: $primary;
            }
        }
    }
}