$modal: $prefix + "modal";

.#{$modal} {
    @extend .modal;
    display: block;

    &-body {
        @extend .modal-body; 
        max-height: 80vh;
        overflow: auto;
    }

    &-content {
        @extend .modal-content;
    }

    &-footer {
        @extend .modal-footer;
    }

    &-header {
        @extend .modal-header;
    }

    &-title {
        @extend .modal-title;
        font-size: 20px;
        font-weight: bold;
    }

    &-wrapper {
        @extend .modal-dialog;
    }

    &-size-small > .#{$modal}-wrapper {
        // @apply max-w-md;
        @extend .modal-sm;
    }


    &-size-large > .#{$modal}-wrapper {
        @extend .modal-xl;
    }


    &-backdrop {
        @extend .modal-backdrop;
        @extend .fade;
        @extend .show;
    }
} 

@include media-breakpoint-up(lg) {
    .#{$modal}-title {
        font-size: 24px;
    }
}

@include color-mode(dark) {
    .#{$modal} {
        --f-modal-bg: var(--#{$prefix}gray-800);
        --f-modal-border-color: var(--#{$prefix}gray-700);
        --f-modal-header-border-color: var(--#{$prefix}gray-700);
        --f-modal-footer-border-color: var(--#{$prefix}gray-700);
    }
}