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

/**
 * A vertical stack of interactive headings used to toggle the display of
 * editable block content.
 */


//
// SCSS imports
//

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



/**
 * Blocks
 */

.blocks {
    --blocks-bg: var(--bg-secondary);
    --blocks-border-color: var(--border-color-secondary);
    --blocks-border-radius: var(--rounded-md);
    --blocks-border-width: var(--border-width);
    --blocks-item-active-bg: var(--bg-highlight);
    --blocks-item-padding-x: var(--card-padding-x);
    --blocks-item-padding-y: var(--card-padding-y);

    background-color: var(--blocks-bg);
    border: var(--blocks-border-width) solid var(--blocks-border-color);
    border-radius: var(--rounded-md);
    margin-top: var(--space-6);
}


/**
 * Blocks item
 */

.blocks__item {
    animation: add-blocks ease-in-out 500ms;
    background-color: var(--blocks-bg);
    box-sizing: border-box;
    width: 100%;
    
    &:first-child {
        border-top-left-radius: var(--blocks-border-radius);
        border-top-right-radius: var(--blocks-border-radius);
        border-top: 0;

        & > .blocks__header {
            border-top-left-radius: var(--blocks-border-radius);
            border-top-right-radius: var(--blocks-border-radius);
            
            [data-action=move-block-up] {
                display: none !important;
            }
        }
    }

    &:last-child {
        border-bottom-left-radius: var(--blocks-border-radius);
        border-bottom-right-radius: var(--blocks-border-radius);
    }
    
    &:nth-last-child(2) {
        & > .blocks__header {
            [data-action=move-block-down] {
                display: none !important;
            }
        }
    }

    & + & {
        border-top: var(--blocks-border-width) solid var(--blocks-border-color);
    }

    &:hover {
        & > .blocks__header {
            background-color: var(--blocks-item-active-bg);
            
            [data-action=move-block-down],
            [data-action=move-block-up] {
                opacity: 1;
                visibility: visible;
            }
        }

    }

    &[open] {
        & > .blocks__header {
            background-color: var(--blocks-item-active-bg);

            [data-action=move-block-down],
            [data-action=move-block-up] {
                opacity: 1;
                visibility: visible;
            }
        }

        .blocks__content {
            display: blocks;
        }
    }

    [data-action=move-block-down],
    [data-action=move-block-up] {
        opacity: 0;
        visibility: hidden;
    }
}


@keyframes add-blocks {
    0% {
        opacity: 0;
        transform: translateX(-2rem);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


/**
 * Blocks header
 */

.blocks__header {
    @include transition('background-color');
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding: var(--blocks-item-padding-y) var(--blocks-item-padding-x);
    position: relative;
}


/**
 * Blocks title
 */

.blocks__title {
    color: var(--text-color-secondary);
    font-weight: var(--font-weight-medium);
    margin-left: var(--space-2);
    margin-right: var(--space-2);
}


/**
 * Blocks actions
 */

.blocks__actions {
    align-items: center;
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    margin-left: auto;
}


/**
 * Blocks content
 */

.blocks__content {
    border-top: var(--blocks-border-width) solid var(--blocks-border-color);
    box-sizing: border-box;
    padding: var(--blocks-item-padding-y) var(--blocks-item-padding-x);

    & > * + *:not(& > .sr-only + *) {
        margin-top: var(--space-6);
    }    
}




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

/**
 * Modifier: Nested blocks
 */

.blocks[data-nested=true] {
    background-color: var(--bg-highlight);
    padding: var(--blocks-item-padding-y) var(--blocks-item-padding-x);

    .blocks__item {
        border: var(--blocks-border-width) solid var(--blocks-border-color);

        & + & {
            border-top: 0;
        }
    }
}


/**
 * Modifier: Add block
 */

.blocks__item[data-action=add-block] {
    @include transition('background-color');
    align-items: center;
    appearance: none;
    border-bottom-left-radius: var(--blocks-border-radius);
    border-bottom-right-radius: var(--blocks-border-radius);
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding: var(--blocks-item-padding-y) var(--blocks-item-padding-x);

    & > * {
        pointer-events: none;
    }

    &:hover {
        background-color: var(--blocks-item-active-bg);
    }
}