////
///
/// Modal Utility Classes
/// ===========================================================================
///
/// Modal utility classes for dialog and popup components.
///
/// @group Classes.BodyOrganisms
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

// ============================================================================
// Use
// ============================================================================

@use "../../mixins" as mixins;

// ============================================================================
// Utility Classes
// ============================================================================

/// Base modal container - hidden by default
.modal {
    @include mixins.modal;
}

/// Modal child elements (BEM naming with double underscore)
.modal__header {
    @include mixins.modal_header;
}

.modal__content {
    @include mixins.modal_content;
}

.modal__footer {
    @include mixins.modal_footer;
}

.modal__backdrop {
    @include mixins.modal_backdrop;
}

.modal__dialog {
    @include mixins.modal_dialog;
}

/// Legacy naming support (underscore instead of double underscore)
.modal_header {
    @include mixins.modal_header;
}

.modal_content {
    @include mixins.modal_content;
}

.modal_footer {
    @include mixins.modal_footer;
}

.modal_form {
    @include mixins.modal_form;
}

.modal_fieldset {
    @include mixins.modal_fieldset;
}

.modal_backdrop {
    @include mixins.modal_backdrop;
}

.modal_dialog {
    @include mixins.modal_dialog;
}

/// Size modifiers
.modal--sm {
    @include mixins.modal--sm;
}

.modal--md {
    @include mixins.modal--md;
}

.modal--lg {
    @include mixins.modal--lg;
}

.modal--xl {
    @include mixins.modal--xl;
}

.modal--fullscreen {
    @include mixins.modal--fullscreen;
}

/// Responsive fullscreen variants
@media (max-width: q(576)) {
    .modal--fullscreen-sm-down {
        @include mixins.modal--fullscreen;
    }
}

@media (max-width: q(768)) {
    .modal--fullscreen-md-down {
        @include mixins.modal--fullscreen;
    }
}

@media (max-width: q(992)) {
    .modal--fullscreen-lg-down {
        @include mixins.modal--fullscreen;
    }
}

@media (max-width: q(1200)) {
    .modal--fullscreen-xl-down {
        @include mixins.modal--fullscreen;
    }
}

/// Layout modifiers
.modal--centered {
    @include mixins.modal--centered;
}

.modal--scrollable {
    @include mixins.modal--scrollable;
}

.modal--static {
    @include mixins.modal--static;
}

/// Animation modifiers
.modal--fade {
    @include mixins.modal--fade;
}

.modal--slide-top {
    @include mixins.modal--slide-top;
}

.modal--slide-bottom {
    @include mixins.modal--slide-bottom;
}

.modal--scale {
    @include mixins.modal--scale;
}