/* ============================================================================
   06-COMPONENTS -> #MODAL
   ========================================================================= */

/**
 * An interface element that appears over the top of all other page content and
 * directs the users attention to an important action or piece of information.
 */


//
// SCSS imports
//

@use '../02-tools' as *;


/**
 * Modal
 */

.modal {
    --modal-bg: var(--bg-primary);
    --modal-border-color: var(--border-color-secondary);
    --modal-border-radius: var(--rounded-md);
    --modal-border-width: var(--border-width);
    --modal-max-width: 40rem;
    --modal-padding-x: var(--card-padding-x);
    --modal-padding-y: var(--card-padding-y);

    background-color: var(--bg-overlay);
    bottom: 0;
    display: flex;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--modal-padding-y) var(--modal-padding-x);
    position: fixed;
    right: 0;
    top: 0;
    z-index: var(--z-index-100);
    
    &[aria-hidden=true] {
        display: none;
    }
}


/**
 * Modal window
 */

.modal__window {
    background-color: var(--modal-bg);
    border-radius: var(--modal-border-radius);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-flow: column nowrap;
    height: auto;
    margin: auto;
    max-width: var(--modal-max-width);
    overflow: hidden;
    position: relative;
    width: 100%;
}


/**
 * Modal header
 */

.modal__header {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--modal-padding-y) var(--modal-padding-x);
    width: 100%;
}


/**
 * Modal header icon
 */

.modal__header-icon {}


/**
 * Modal header content
 */

.modal__header-content {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-3);
}


/**
 * Modal close
 */

.modal__close {
    appearance: none;
    background-color: transparent;
    border: 0;
    color: var(--text-color-secondary);
    cursor: pointer;
    display: flex;
    padding: var(--space-2);
    position: absolute;
    right: var(--modal-padding-x);
    top: var(--modal-padding-y);
    z-index: var(--z-index-10);
}


/**
 * Modal content
 */

.modal__content {
    flex-grow: 1;
    max-height: 100%;
    overflow-y: auto;
    padding-bottom: var(--modal-padding-y);
    padding-left: var(--modal-padding-x);
    padding-right: var(--modal-padding-x);
    position: relative;
    width: 100%;
    z-index: var(--z-index-10);
}


/**
 * Modal filters
 */

.modal__filters {
    background-color: var(--modal-bg);
    border-bottom: var(--modal-border-width) solid var(--modal-border-color);
    margin-bottom: var(--modal-padding-y);
    margin-left: calc(var(--modal-padding-x) * -1);
    margin-right: calc(var(--modal-padding-x) * -1);
    margin-top: calc(var(--modal-padding-y) * -1);
    padding: var(--modal-padding-y) var(--modal-padding-x);
    position: sticky;
    top: calc(var(--modal-padding-y) * -1);
    z-index: var(--z-index-10);

    &::after {
        // background: linear-gradient(180deg, rgb(27, 0, 0) 100%, rgba(255,255,255,0) 0%);
        content: '';
        height: var(--modal-padding-y);
        left: 0;
        position: absolute;
        top: 100%;
        width: 100%;
        z-index: -1;
    }
}


/**
 * Modal actions
 */

.modal__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-bottom: var(--modal-padding-y);
    padding-left: var(--modal-padding-x);
    padding-right: var(--modal-padding-x);
    
    @include media-breakpoint-up('sm') {
        flex-direction: row;
        justify-content: flex-end;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
}

@keyframes slide-up {
    from {
        transform: translateY(10%);
    }
}




/* MODIFIERS
   ========================================================================= */


/**
 * Modifier: Small modal
 */

.modal[data-size=sm] {
    --modal-max-width: 25rem;
}
    

/**
 * Modifier: Large modal
 */

.modal[data-size=lg] {
    --modal-max-width: 50rem;
}


/**
 * Modifier: Extra large modal
 */

.modal[data-size=xl] {
    --modal-max-width: 100%;

    & > .modal__window {
        height: 100%;
    }
}


/**
 * Modifier: Inline modal header
 */

.modal__header[data-direction=row] {
    @include media-breakpoint-up('md') {
        align-items: center;
        flex-direction: row;

        & > .modal__header-content {
            margin-left: var(--space-4);
            margin-top: 0;
        }
    }
}