// Modal styles for dark theme
@mixin dark-theme-modal {
    .modal-content {
        background-color: $dark;
        color: $light;
    }

    .modal-dialog {
        .btn-close::after,
        .btn-close::before {
            background-color: $light !important;
        }
    }
}

// Modal styles for light theme
@mixin light-theme-modal {
    .modal-content {
        background-color: $light;
        color: $dark;
    }

    .modal-dialog {
        .btn-close::after,
        .btn-close::before {
            background-color: $dark !important;
        }
    }
}


// Modal container
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background-color: $darken-screen-bg-color;

    justify-content: center;

    // Hide the modal by default
    display: none;

    // Apply light theme as a default theme
    @include light-theme-modal;

    // Show it when the 'active' class is given
    &.active {
        display: flex;
    }

    // Centered modal's styles
    &.modal-centered {
        align-items: center;
        .modal-dialog .modal-content {
            margin-top: 0;
        }
    }

    // Fullscreen modal style
    &.modal-full-screen {
        .modal-dialog .modal-content {
            margin: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            border-radius: 0 !important;
        }
    }

    // Modal container
    .modal-dialog {
        // Modal block
        .modal-content {
            width: auto;
            border-radius: $base-border-radius;
            margin: $base-margin * 2 $base-margin $base-margin $base-margin;

            transition: all $base-transition-time ease-out;

            border-style: solid;
            border-width: $base-border-sickness / 2;
            border-color: generate-shade(map-get($base-color-palette, "gray"), 30, 'lighten');

            // Modal header's styles
            .modal-header {
                padding: $base-padding;

                display: flex;
                justify-content: space-between;
                align-items: center;

                .modal-title {
                    font-size: 20px;
                }

                .btn-exit {
                    margin-left: $base-margin;
                }
            }

            // Main content of the modal
            .modal-body {
                position: relative;
                overflow: hidden;

                padding: $base-padding;
            }

            // Modal footer's styles
            .modal-footer {
                padding: $base-padding;
            }

            // Hide modal by default
            transform: translateY(-100%);
            opacity: 0;

            // Show modal when it is active
            &.active {
                transform: translateY(0);
                opacity: 1;
            }
        }
    }
}


// Apply modal theme styles
body[data-theme="dark"] {
    @include dark-theme-modal;
}

body[data-theme="light"] {
    @include light-theme-modal;
}

.modal[data-theme="dark"] {
    @include dark-theme-modal;
}

.modal[data-theme="light"] {
    @include light-theme-modal;
}