/* DEFAULTS */

html {
    --image-fit: fill;
}

body {
    background-color: var(--theme-color-background);
}

/* TODO: Make use of stacking contexts and remove this (utilize z-index when necessary?) */
/* We add relativity to every component b/c of stacking contexts */
:where(.component) {
    position: relative;
}

.popup {
    position: fixed;
    width: 100vw;
    height: 100%;
    top: 0;
    left: 0;
    overflow-x: auto;
    overflow-y: scroll;
    overscroll-behavior: contain;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.2);
}

.gallery-comp {
    display: flex;
    width: 100%;
    height: 100%;

    position: relative;
    overflow: hidden;

    container: galleryContainer / inline-size;
}

.gallery-comp.thumbnail-bottom {
    flex-direction: column;
}

.gallery-comp.thumbnail-top {
    flex-direction: column-reverse;
}

.gallery-comp.thumbnail-left {
    flex-direction: row;
}

.gallery-comp.thumbnail-right {
    flex-direction: row-reverse;
}

.gallery-comp .gallery-content {
    position: relative;
    flex-grow: 1;
}

.gallery-comp:hover .gallery-button {
    display: flex;
}

.gallery-comp .gallery-button {
    width: 5rem;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    display: none;
    align-items: center;
    justify-content: center;
    color: whitesmoke;
}

.gallery-comp .gallery-button.left {
    left: 0;
}

.gallery-comp .gallery-button.right {
    right: 0;
}

.gallery-comp .gallery-button>i {
    font-size: 28px;
    color: white;
}

.gallery-comp .gallery-list {
    display: flex;
    height: 100%;
}

/* THUMBNAILS / SLIDESHOW */
.gallery-comp[data-gallery-type=thumbnails] .gallery-thumbnail-container {
    position: relative;
    height: var(--gallery-thumbnail-size);
}

.gallery-comp[data-gallery-type=thumbnails] .gallery-thumbnails {
    position: absolute;
    display: flex;
}

.gallery-comp[data-gallery-type=thumbnails] .gallery-thumbnails .image-preview.active::after {
    background-color: rgba(255, 255, 255, 0.4);
    content: "";
    display: block;
    height: 100%;
    width: 100%;
}

.gallery-comp[data-gallery-type=thumbnails] .gallery-thumbnails .image-preview {
    width: var(--gallery-thumbnail-size);
    height: var(--gallery-thumbnail-size);
    background-position: center center;
    background-repeat: no-repeat;
    text-align: left;
    cursor: pointer;
}

.gallery-comp[data-gallery-type=thumbnails] .gallery-list,
.gallery-comp[data-gallery-type=slideshow] .gallery-list {
    transform: translateX(calc(var(--viewing) * -100%));
    transition: transform 0.5s ease-in-out;
}

.gallery-comp[data-gallery-type=thumbnails] .gallery-list>.gallery-item,
.gallery-comp[data-gallery-type=slideshow] .gallery-list>.gallery-item {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}

.gallery-comp[data-gallery-type=thumbnails] .gallery-list>.gallery-item.transitioning,
.gallery-comp[data-gallery-type=slideshow] .gallery-list>.gallery-item.transitioning {
    transition: opacity 0.2s ease-in-out;
}

/* ========================== */
/* ========== GRID ========== */
/* ========================== */

/* data-gallery-scroll="vertical" */
/* data-gallery-scroll="horizontal" */

/* .gallery-comp[data-gallery-type=grid] {} */

.gallery-comp[data-gallery-type=grid] .gallery-list {
    display: grid;
    gap: var(--gallery-thumbnail-spacing);
}

/* ITEMS PER ROW */
.gallery-comp[data-gallery-type=grid][data-gallery-display="items-per-row"] .gallery-list {
    grid-template-columns: repeat(var(--gallery-items-per-row), 1fr);
}

/* FIT TO SCREEN */
.gallery-comp[data-gallery-type=grid][data-gallery-display="fit-to-screen"] .gallery-list {
    grid-template-columns: 1fr;
}

@container galleryContainer (width > 400px) {
    .gallery-comp[data-gallery-type=grid][data-gallery-display="fit-to-screen"] .gallery-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container galleryContainer (width > 1000px) {
    .gallery-comp[data-gallery-type=grid][data-gallery-display="fit-to-screen"] .gallery-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@container galleryList (width > 1400px) {
    .gallery-list {
        grid-template-columns: repeat(4, 1fr);
    }
}

.gallery-comp[data-gallery-type=grid] .gallery-list>.gallery-item {
    aspect-ratio: var(--gallery-thumbnail-ratio);
    width: 100%;
    min-width: 100%;
}

/* STRIP */

.gallery-comp[data-gallery-type=strip] .gallery-list {
    flex-direction: column;
}

.gallery-comp[data-gallery-type=strip] .gallery-list>.gallery-item {
    aspect-ratio: var(--image-ratio);
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}

/* COLUMN */

.gallery-comp[data-gallery-type=column] .gallery-list {
    --image-fit: cover;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: var(--gallery-thumbnail-spacing);
}

.gallery-comp[data-gallery-type=column] .gallery-list>.gallery-item {
    aspect-ratio: var(--gallery-thumbnail-ratio);
    width: calc(20cqw - 0.5rem - var(--gallery-thumbnail-spacing, 0));
    height: 100%;
}

.text {
    font-size: inherit;
    font-weight: inherit;
}

/* TODO: Remove relative position from these. */
:where(.component[data-type="global"],
    .component[data-type="header"],
    .component[data-type="footer"],
    .component[data-type="section"]) {
    position: relative;
    overflow-x: clip;
    width: 100%;
}

.component[data-type="repeater_item"]>.cont-bg,
.component[data-type="multi_state_box_item"]>.cont-bg,
.component[data-type="header"]>.cont-bg,
.component[data-type="footer"]>.cont-bg,
.component[data-type="section"]>.cont-bg,
.component[data-type="lightbox"]>.cont-bg,
.component[data-type="container"]>.cont-bg {
    user-select: none;
}

.component[data-type="repeater_item"]>.cont-contents,
.component[data-type="multi_state_box_item"]>.cont-contents,
.component[data-type="header"]>.cont-contents,
.component[data-type="footer"]>.cont-contents,
.component[data-type="section"]>.cont-contents,
.component[data-type="lightbox"]>.cont-contents,
.component[data-type="container"]>.cont-contents {
    display: var(--cont-display);
    grid-template-columns: var(--cont-grid-template-columns);
    grid-template-rows: var(--cont-grid-template-rows);
    column-gap: var(--cont-column-gap);
    row-gap: var(--cont-row-gap);
    width: 100%;
    height: 100%;
    min-height: inherit;
}

:where(.component[data-type="container"]) {
    position: relative;
    --cont-row-gap: 0px;
    --cont-column-gap: 0px;
    --theme-container-border: none;
    --theme-container-border-radius: 0px;
}

.component[data-type="text"]>h1,
.component[data-type="text"]>h2,
.component[data-type="text"]>h3,
.component[data-type="text"]>h4,
.component[data-type="text"]>h5,
.component[data-type="text"]>h6,
.component[data-type="text"]>p {
    font-size: inherit;
    font-weight: inherit;
    -webkit-text-stroke: var(--text-stroke);
}


:where(.component[data-type="menu"]) {
    width: max-content;
    height: max-content;
    /* DEPRECATED: now inside styling */
    display: flex;
    flex-wrap: wrap;

    background-color: var(--theme-menu-bar-bg-color, var(--theme-color-surface));
    border-radius: var(--theme-menu-bar-border-radius, 8px);
    gap: var(--theme-menu-bar-gap, 5px);
}

.component[data-type="menu"] .menu-item {
    height: 100%;
    display: inline-block;
    position: relative;
    z-index: 1;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;

    color: var(--theme-menu-item-text-color);
    background-color: var(--theme-menu-item-bg-color);
    padding: var(--theme-menu-item-padding, 13px 15px);
    border: var(--theme-menu-item-border);
    border-radius: var(--theme-menu-item-border-radius);
    text-align: var(--theme-menu-item-text-align, center);
    font-weight: var(--theme-menu-item-font-weight);
    font-size: var(--theme-menu-item-font-size, 15px);
}

.component[data-type="menu"] .menu-item.selected {
    color: var(--theme-menu-item-text-color-selected, var(--theme-menu-item-text-color));
    background-color: var(--theme-menu-item-bg-color-selected, var(--theme-menu-item-bg-color));
    padding: var(--theme-menu-item-padding-selected, var(--theme-menu-item-padding));
    border: var(--theme-menu-item-border-selected, var(--theme-menu-item-border));
    border-radius: var(--theme-menu-item-border-radius-selected, var(--theme-menu-item-border-radius));
    text-align: var(--theme-menu-item-text-align-selected, var(--theme-menu-item-text-align));
    font-weight: var(--theme-menu-item-font-weight-selected, var(--theme-menu-item-font-weight));
    font-size: var(--theme-menu-item-font-size-selected, var(--theme-menu-item-font-size));
}

.component[data-type="menu"] .menu-item:hover {
    color: var(--theme-menu-item-text-color-hover, var(--theme-menu-item-text-color));
    background-color: var(--theme-menu-item-bg-color-hover, var(--theme-menu-item-bg-color));
    padding: var(--theme-menu-item-padding-hover, var(--theme-menu-item-padding));
    border: var(--theme-menu-item-border-hover, var(--theme-menu-item-border));
    border-radius: var(--theme-menu-item-border-radius-hover, var(--theme-menu-item-border-radius));
    text-align: var(--theme-menu-item-text-align-hover, var(--theme-menu-item-text-align));
    font-weight: var(--theme-menu-item-font-weight-hover, var(--theme-menu-item-font-weight));
    font-size: var(--theme-menu-item-font-size-hover, var(--theme-menu-item-font-size));
}

.component[data-type="menu"] .menu-item-dropdown {
    position: relative;
}

.component[data-type="menu"] .menu-item-dropdown:hover>.menu-dropdown {
    display: flex;
}

.component[data-type="menu"] .menu-item-dropdown.horizontal>.menu-dropdown {
    left: 0;
    top: 100%;
}

.component[data-type="menu"] .menu-item-dropdown.vertical>.menu-dropdown {
    left: 100%;
    top: 0;
}

.component[data-type="menu"] .menu-dropdown {
    flex-direction: column;
    position: absolute;
    display: none;
    min-width: 100%;

    color: var(--theme-menu-dropdown-text-color);
    background-color: var(--theme-menu-dropdown-bg-color);
    padding: var(--theme-menu-dropdown-padding);
    border: var(--theme-menu-dropdown-border);
    border-radius: var(--theme-menu-dropdown-border-radius);
    text-align: var(--theme-menu-dropdown-text-align);
    font-weight: var(--theme-menu-dropdown-font-weight);
    font-size: var(--theme-menu-dropdown-font-size);
}

/* TODO: Implement into JS to prevent unused theme variable sets' from being in here. */

:where(.component[data-type="lightbox"],
    .component[data-type="container"],
    .component[data-type="repeater_item"]) {
    border: var(--theme-container-border);
    border-radius: var(--theme-container-border-radius);
}

.component[data-type="section"] {
    border: var(--theme-section-border);
    border-radius: var(--theme-section-border-radius);
}

.component[data-type="line"] {
    border-top: var(--line-thickness);
}

.component[data-type="line"][data-line-type="vertical"] {
    transform: rotate(90deg);
}

:where(.component[data-type="widget"]) {
    /* DEPRECATED: now inside styling */
    display: flex;
}

:where(.component[data-type="image"]) {
    overflow: hidden;
}

:where(.component[data-type="button"]) {
    /* DEPRECATED: now inside styling */
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    color: var(--theme-button-text-color);
    background-color: var(--theme-button-bg-color);
    padding: var(--theme-button-padding);
    border: var(--theme-button-border);
    border-radius: var(--theme-button-border-radius);
    text-align: var(--theme-button-text-align);
    font-weight: var(--theme-button-font-weight);
    font-size: var(--theme-button-font-size);
    line-height: var(--theme-button-line-height);
    transition: var(--theme-button-transition);
    text-decoration: var(--theme-button-text-decoration);
    text-transform: var(--theme-button-text-transform);
    box-shadow: var(--theme-button-box-shadow);
}

.component[data-type="button"]:hover {
    color: var(--theme-button-text-color-hover, var(--theme-button-text-color));
    background-color: var(--theme-button-bg-color-hover, var(--theme-button-bg-color));
    padding: var(--theme-button-padding-hover, var(--theme-button-padding));
    border: var(--theme-button-border-hover, var(--theme-button-border));
    border-radius: var(--theme-button-border-radius-hover, var(--theme-button-border-radius));
    text-align: var(--theme-button-text-align-hover, var(--theme-button-text-align));
    font-weight: var(--theme-button-font-weight-hover, var(--theme-button-font-weight));
    font-size: var(--theme-button-font-size-hover, var(--theme-button-font-size));
    text-decoration: var(--theme-button-text-decoration-hover, var(--theme-button-text-decoration));
    text-transform: var(--theme-button-text-transform-hover, var(--theme-button-text-transform));
    box-shadow: var(--theme-button-box-shadow-hover, var(--theme-button-box-shadow));
}

.component[data-type="button"]:disabled,
.component[data-type="button"][data-disabled="true"] {
    cursor: default;

    color: var(--theme-button-text-color-disabled, var(--theme-button-text-color)) !important;
    background-color: var(--theme-button-bg-color-disabled, var(--theme-button-bg-color)) !important;
    padding: var(--theme-button-padding-disabled, var(--theme-button-padding)) !important;
    border: var(--theme-button-border-disabled, var(--theme-button-border)) !important;
    border-radius: var(--theme-button-border-radius-disabled, var(--theme-button-border-radius)) !important;
    text-align: var(--theme-button-text-align-disabled, var(--theme-button-text-align)) !important;
    font-weight: var(--theme-button-font-weight-disabled, var(--theme-button-font-weight)) !important;
    font-size: var(--theme-button-font-size-disabled, var(--theme-button-font-size)) !important;
    text-decoration: var(--theme-button-text-decoration-disabled, var(--theme-button-text-decoration)) !important;
    text-transform: var(--theme-button-text-transform-disabled, var(--theme-button-text-transform)) !important;
    box-shadow: var(--theme-button-box-shadow-disabled, var(--theme-button-box-shadow)) !important;
}

a.component[data-type="button"][data-disabled="true"] {
    pointer-events: none;
}

.component[data-type="button"] .button-icon {
    color: var(--theme-button-icon-color, var(--theme-button-text-color));
}

.component[data-type="button"]:hover .button-icon {
    color: var(--theme-button-icon-color-hover, var(--theme-button-text-color));
}

.component[data-type="button"]:disabled .button-icon {
    color: var(--theme-button-icon-color-disabled, var(--theme-button-text-color));
}

:where(.component[data-type="input"])>.input-title {
    text-align: left;
}

:where(.component[data-type="input"])>.input-item[type="submit"] {
    cursor: pointer;
}

:where(.component[data-type="input"])>.input-item:not([type="submit"]) {
    margin-top: 4px;
}

:where(.component[data-type="input"])>select {
    width: 100%;

    color: var(--theme-input-text-color);
    background-color: var(--theme-input-bg-color);
    border-top: var(--theme-input-border-top, var(--theme-input-border));
    border-bottom: var(--theme-input-border-bottom, var(--theme-input-border));
    border-left: var(--theme-input-border-left, var(--theme-input-border));
    border-right: var(--theme-input-border-right, var(--theme-input-border));
    padding: var(--theme-input-padding);
    padding-right: 2.5rem;
    border-radius: var(--theme-input-border-radius);
    font-weight: var(--theme-input-font-weight);
    font-size: var(--theme-input-font-size);
    line-height: var(--theme-input-line-height);
}

:where(.component[data-type="input"])>.input-item {
    width: 100%;
    resize: none;

    color: var(--theme-input-text-color);
    background-color: var(--theme-input-bg-color);
    padding: var(--theme-input-padding);
    border-top: var(--theme-input-border-top, var(--theme-input-border));
    border-bottom: var(--theme-input-border-bottom, var(--theme-input-border));
    border-left: var(--theme-input-border-left, var(--theme-input-border));
    border-right: var(--theme-input-border-right, var(--theme-input-border));
    border-radius: var(--theme-input-border-radius);
    text-align: var(--theme-input-text-align);
    font-weight: var(--theme-input-font-weight);
    font-size: var(--theme-input-font-size);
    transition: var(--theme-input-transition);
    line-height: var(--theme-input-line-height);
    outline: var(--theme-input-outline);
}

:where(.component[data-type="input"])>.input-item:hover {
    color: var(--theme-input-text-color-hover, var(--theme-input-text-color));
    background-color: var(--theme-input-bg-color-hover, var(--theme-input-bg-color));
    padding: var(--theme-input-padding-hover, var(--theme-input-padding));
    border-top: var(--theme-input-border-top-hover, var(--theme-input-border-top));
    border-bottom: var(--theme-input-border-bottom-hover, var(--theme-input-border-bottom));
    border-left: var(--theme-input-border-left-hover, var(--theme-input-border-left));
    border-right: var(--theme-input-border-right-hover, var(--theme-input-border-right));
    border-radius: var(--theme-input-border-radius-hover, var(--theme-input-border-radius));
    text-align: var(--theme-input-text-align-hover, var(--theme-input-text-align));
    font-weight: var(--theme-input-font-weight-hover, var(--theme-input-font-weight));
    font-size: var(--theme-input-font-size-hover, var(--theme-input-font-size));
    transition: var(--theme-input-transition-hover, var(--theme-input-transition));
    line-height: var(--theme-input-line-height-hover, var(--theme-input-line-height));
    outline: var(--theme-input-outline-hover, var(--theme-input-outline));
}

:where(.component[data-type="input"])>.input-item:active {
    color: var(--theme-input-text-color-active, var(--theme-input-text-color));
    background-color: var(--theme-input-bg-color-active, var(--theme-input-bg-color));
    padding: var(--theme-input-padding-active, var(--theme-input-padding));
    border-top: var(--theme-input-border-top-active, var(--theme-input-border-top));
    border-bottom: var(--theme-input-border-bottom-active, var(--theme-input-border-bottom));
    border-left: var(--theme-input-border-left-active, var(--theme-input-border-left));
    border-right: var(--theme-input-border-right-active, var(--theme-input-border-right));
    border-radius: var(--theme-input-border-radius-active, var(--theme-input-border-radius));
    text-align: var(--theme-input-text-align-active, var(--theme-input-text-align));
    font-weight: var(--theme-input-font-weight-active, var(--theme-input-font-weight));
    font-size: var(--theme-input-font-size-active, var(--theme-input-font-size));
    transition: var(--theme-input-transition-active, var(--theme-input-transition));
    line-height: var(--theme-input-line-height-active, var(--theme-input-line-height));
    outline: var(--theme-input-outline-active, var(--theme-input-outline));
}

:where(.component[data-type="input"])>.input-item:disabled {
    color: var(--theme-input-text-color-disabled, var(--theme-input-text-color));
    background-color: var(--theme-input-bg-color-disabled, var(--theme-input-bg-color));
    padding: var(--theme-input-padding-disabled, var(--theme-input-padding));
    border-top: var(--theme-input-border-top-disabled, var(--theme-input-border-top));
    border-bottom: var(--theme-input-border-bottom-disabled, var(--theme-input-border-bottom));
    border-left: var(--theme-input-border-left-disabled, var(--theme-input-border-left));
    border-right: var(--theme-input-border-right-disabled, var(--theme-input-border-right));
    border-radius: var(--theme-input-border-radius-disabled, var(--theme-input-border-radius));
    text-align: var(--theme-input-text-align-disabled, var(--theme-input-text-align));
    font-weight: var(--theme-input-font-weight-disabled, var(--theme-input-font-weight));
    font-size: var(--theme-input-font-size-disabled, var(--theme-input-font-size));
    transition: var(--theme-input-transition-disabled, var(--theme-input-transition));
    line-height: var(--theme-input-line-height-disabled, var(--theme-input-line-height));
    outline: var(--theme-input-outline-disabled, var(--theme-input-outline));
}

:where(.component[data-type="input"])>.input-item:focus {
    color: var(--theme-input-text-color-focus, var(--theme-input-text-color));
    background-color: var(--theme-input-bg-color-focus, var(--theme-input-bg-color));
    padding: var(--theme-input-padding-focus, var(--theme-input-padding));
    border-top: var(--theme-input-border-top-focus, var(--theme-input-border-top));
    border-bottom: var(--theme-input-border-bottom-focus, var(--theme-input-border-bottom));
    border-left: var(--theme-input-border-left-focus, var(--theme-input-border-left));
    border-right: var(--theme-input-border-right-focus, var(--theme-input-border-right));
    border-radius: var(--theme-input-border-radius-focus, var(--theme-input-border-radius));
    text-align: var(--theme-input-text-align-focus, var(--theme-input-text-align));
    font-weight: var(--theme-input-font-weight-focus, var(--theme-input-font-weight));
    font-size: var(--theme-input-font-size-focus, var(--theme-input-font-size));
    transition: var(--theme-input-transition-focus, var(--theme-input-transition));
    line-height: var(--theme-input-line-height-focus, var(--theme-input-line-height));
    outline: var(--theme-input-outline-focus, var(--theme-input-outline));
}

:where(.component[data-type="input"])>.input-check-container {
    text-align: left;
}

:where(.component[data-type="input"]) .check-label {
    display: initial;
}

/* We use :where to make specificity 0 */
:where(.component[data-type="text"]:has(.text-h1)) {
    color: var(--theme-text-h1-text-color);
    font-weight: var(--theme-text-h1-font-weight);
    font-style: var(--theme-text-h1-font-style);
    font-size: var(--theme-text-h1-font-size);
    font-family: var(--theme-text-h1-font-family);
    place-self: var(--theme-text-h1-place-self);
    line-height: var(--theme-text-h1-line-height);
    letter-spacing: var(--theme-text-h1-letter-spacing);
}

:where(.component[data-type="text"]:has(.text-h2)) {
    color: var(--theme-text-h2-text-color);
    font-weight: var(--theme-text-h2-font-weight);
    font-style: var(--theme-text-h2-font-style);
    font-size: var(--theme-text-h2-font-size);
    font-family: var(--theme-text-h2-font-family);
    place-self: var(--theme-text-h2-place-self);
    line-height: var(--theme-text-h2-line-height);
    letter-spacing: var(--theme-text-h2-letter-spacing);
}

:where(.component[data-type="text"]:has(.text-h3)) {
    color: var(--theme-text-h3-text-color);
    font-weight: var(--theme-text-h3-font-weight);
    font-style: var(--theme-text-h3-font-style);
    font-size: var(--theme-text-h3-font-size);
    font-family: var(--theme-text-h3-font-family);
    place-self: var(--theme-text-h3-place-self);
    line-height: var(--theme-text-h3-line-height);
    letter-spacing: var(--theme-text-h3-letter-spacing);
}

:where(.component[data-type="text"]:has(.text-p1)) {
    color: var(--theme-text-p1-text-color);
    font-weight: var(--theme-text-p1-font-weight);
    font-style: var(--theme-text-p1-font-style);
    font-size: var(--theme-text-p1-font-size);
    font-family: var(--theme-text-p1-font-family);
    place-self: var(--theme-text-p1-place-self);
    line-height: var(--theme-text-p1-line-height);
    letter-spacing: var(--theme-text-p1-letter-spacing);
}

:where(.component[data-type="text"]:has(.text-p2)) {
    color: var(--theme-text-p2-text-color);
    font-weight: var(--theme-text-p2-font-weight);
    font-style: var(--theme-text-p2-font-style);
    font-size: var(--theme-text-p2-font-size);
    font-family: var(--theme-text-p2-font-family);
    place-self: var(--theme-text-p2-place-self);
    line-height: var(--theme-text-p2-line-height);
    letter-spacing: var(--theme-text-p2-letter-spacing);
}

:where(.component[data-type="text"]:has(.text-p3)) {
    color: var(--theme-text-p3-text-color);
    font-weight: var(--theme-text-p3-font-weight);
    font-style: var(--theme-text-p3-font-style);
    font-size: var(--theme-text-p3-font-size);
    font-family: var(--theme-text-p3-font-family);
    place-self: var(--theme-text-p3-place-self);
    line-height: var(--theme-text-p3-line-height);
    letter-spacing: var(--theme-text-p3-letter-spacing);
}

.marquee-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    white-space: nowrap;
}

.marquee-content {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
}

.marquee-inner {
    display: inline-block;
    white-space: nowrap;
    margin-right: var(--marquee-gap);
}

/* Fade edges effect */
.marquee-fade-edges {
    /* Default horizontal fade */
    mask-image: linear-gradient(to right,
            transparent 0%,
            black 10%,
            black 90%,
            transparent 100%);
}

.marquee-vertical.marquee-fade-edges {
    mask-image: linear-gradient(to bottom,
            transparent 0%,
            black 10%,
            black 90%,
            transparent 100%);
}

@keyframes marquee-left {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes marquee-right {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(50%);
    }
}

@keyframes marquee-up {
    0% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(-50%);
    }
}

@keyframes marquee-down {
    0% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(50%);
    }
}

.text-effect-layers {
    display: inline-grid;
}

.text-effect-layers-item {
    display: block;
    grid-area: 1/1/-1/-1;
}

/* TODO: Handle p2/p3 */

.component[data-type="image"]>.inner-img-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.component[data-type="image"]>.inner-img-container>.img {
    position: absolute;
    object-fit: var(--image-fit);
    width: 100%;
    height: 100%;
}