$device: "_DEVICE_";

/** 
 * GENERAL SETTINGS
 */

// Hidden
.tzm-responsive__hidden__#{$device} {
    display: none !important;
}

// Full width
.tzm-responsive__full-width__#{$device} {
    width: 100% !important;

    .is-layout-flex > & {
        flex-basis: 100% !important;
    }
    .wp-block-columns:has(&),
    .wp-block-group.is-layout-flex.is-nowrap:has(&) {
        flex-wrap: wrap !important;
    }
    // Various blocks
    .wp-block-buttons:has(&),
    &.wp-block-button .wp-block-button__link,
    &.wp-element-button,
    &.wp-block-site-logo > *,
    &.wp-block-image > * {
        width: 100% !important;
        height: auto !important;
    }
}

/**
 * FLEXBOX SETTINGS
 */

// Reverse
.tzm-responsive__reverse__#{$device} {
    &.is-layout-flex:not(.is-vertical) {
        flex-direction: row-reverse !important;
    }
    &.is-layout-flex.is-vertical {
        flex-direction: column-reverse !important;
    }

    // Media & Text block
    &.wp-block-media-text {
        direction: rtl;
    }

    // Navigation block
    &.wp-block-navigation.is-horizontal .wp-block-navigation__container {
        --navigation-layout-direction: row-reverse;
    }
    &.wp-block-navigation.is-vertical .wp-block-navigation__container {
        --navigation-layout-direction: column-reverse;
    }

    &.is-responsive .is-menu-open .wp-block-navigation__container {
        flex-direction: column-reverse;
    }
}

// Justify
[style*="--tzm-responsive--justify--#{$device}"] {
    &.is-layout-flex {
        &:not(.is-vertical),
        &.is-horizontal,
        &.is-horizontal.wp-block-navigation .wp-block-navigation__container {
            justify-content: var(--tzm-responsive--justify--#{$device}) !important;
        }

        &.is-vertical,
        &.is-vertical.wp-block-navigation .wp-block-navigation__container {
            align-items: var(--tzm-responsive--justify--#{$device}) !important;
        }

        &.wp-block-navigation.is-responsive .is-menu-open {
            .wp-block-navigation__container,
            .wp-block-navigation__responsive-container-content {
                --navigation-layout-justification-setting: var(--tzm-responsive--justify--#{$device}) !important;
            }
        }
    }
}

// Image alignment
.tzm-responsive__image-align-left__#{$device} {
    text-align: left !important;

    &.wp-block-post-featured-image {
        margin-left: 0 !important;
    }
}
.tzm-responsive__image-align-center__#{$device} {
    text-align: center !important;

    &.wp-block-post-featured-image {
        margin-inline: auto !important;
    }
}
.tzm-responsive__image-align-right__#{$device} {
    text-align: right !important;

    &.wp-block-post-featured-image {
        margin-right: 0 !important;
    }
}
[class*="tzm-responsive__image-align-"] {
    // Editor only
    &.wp-block-site-logo > .components-resizable-box__container,
    &.wp-block-image > .components-resizable-box__container {
        display: inline-block !important;
    }
}

/** 
 * TYPOGRAPHY SETTINGS
 */

// Text alignment
[style*="--tzm-responsive--text-align--#{$device}"] {
    text-align: var(--tzm-responsive--text-align--#{$device}) !important;

    & > figcaption {
        text-align: inherit !important;
    }

    // Editor only
    &.wp-block-site-logo > .components-resizable-box__container,
    &.wp-block-image > .components-resizable-box__container {
        display: inline-block !important;
    }
}

// Font size
[style*="--tzm-responsive--font-size--#{$device}"] {
    font-size: var(--tzm-responsive--font-size--#{$device}) !important;

    > figcaption,
    &.wp-block-buttons .wp-block-button__link {
        font-size: inherit;
    }
}

/** 
 * SPACING SETTINGS
 */

// Padding
[style*="--tzm-responsive--padding--#{$device}"] {
    padding: var(--tzm-responsive--padding--#{$device}) !important;
}
[style*="--tzm-responsive--padding-top--#{$device}"] {
    padding-top: var(--tzm-responsive--padding-top--#{$device}) !important;
}
[style*="--tzm-responsive--padding-right--#{$device}"] {
    padding-right: var(--tzm-responsive--padding-right--#{$device}) !important;
}
[style*="--tzm-responsive--padding-bottom--#{$device}"] {
    padding-bottom: var(--tzm-responsive--padding-bottom--#{$device}) !important;
}
[style*="--tzm-responsive--padding-left--#{$device}"] {
    padding-left: var(--tzm-responsive--padding-left--#{$device}) !important;
}

// Margin
[style*="--tzm-responsive--margin--#{$device}"] {
    margin: var(--tzm-responsive--margin--#{$device}) !important;
}
[style*="--tzm-responsive--margin-top--#{$device}"] {
    margin-top: var(--tzm-responsive--margin-top--#{$device}) !important;
}
[style*="--tzm-responsive--margin-right--#{$device}"] {
    margin-right: var(--tzm-responsive--margin-right--#{$device}) !important;
}
[style*="--tzm-responsive--margin-bottom--#{$device}"] {
    margin-bottom: var(--tzm-responsive--margin-bottom--#{$device}) !important;
}
[style*="--tzm-responsive--margin-left--#{$device}"] {
    margin-left: var(--tzm-responsive--margin-left--#{$device}) !important;
}

// Height
[style*="--tzm-responsive--height--#{$device}"] {
    min-height: var(--tzm-responsive--height--#{$device}) !important;
}

// Block gap
[style*="--tzm-responsive--block-gap--#{$device}"] {
    gap: var(--tzm-responsive--block-gap--#{$device}) !important;
}

// Mobile specific styles
/*
.tzm-responsive__reverse-_DEVICE_.is-layout-flex:not(.wp-block-group):not(.is-not-stacked-on-mobile) {
    flex-direction: column-reverse !important;
}
*/