:root {
    /* content separator variables */
    --layout-content-row-gap: 10px;
    --layout-content-separator-line-width: 2px;
}

.layout-pos-relative {
    position: relative;
}

.layout-pos-absolute {
    position: absolute;
}

.layout-line-separator:not(:last-child)::after {
    content: "";
    position: absolute;
    width: 100%;
    height: var(--layout-content-separator-line-width);
    left: 0;
    bottom: calc(((var(--layout-content-row-gap) / 2) + var(--layout-content-separator-line-width)) * -1);
    background: var(--bg-separator-main);
}

.layout-middle {
    padding-top: 10px;
    padding-bottom: 10px;
}

.layout-auto-margin-left-right {
    margin-left: auto;
    margin-right: auto;
}

.layout-no-margin-top-bottom {
    margin-top: 0;
    margin-bottom: 0;
}

.layout-column-gap-s {
    column-gap: 5px;
}

.layout-column-gap-m {
    column-gap: 10px;
}

.layout-column-gap-l {
    column-gap: 20px;
}

.layout-row-gap-s {
    row-gap: 5px;
}

.layout-row-gap-m {
    row-gap: 10px;
}

.layout-row-gap-l {
    row-gap: 20px;
}

.layout-content-row-gap {
    row-gap: var(--layout-content-row-gap);
}

/* justify content */
.layout-justify-content-center {
    justify-content: center;
}

.layout-justify-content-start {
    justify-content: start;
}

.layout-justify-content-end {
    justify-content: end;
}

.layout-justify-content-stretch {
    justify-content: stretch;
}

.layout-justify-content-flex-start {
    justify-content: flex-start;
}

.layout-justify-content-flex-end {
    justify-content: flex-end;
}

/* justify items */
.layout-justify-items-center {
    justify-items: center;
}

.layout-justify-items-start {
    justify-items: start;
}

.layout-justify-items-end {
    justify-items: end;
}

.layout-justify-items-stretch {
    justify-items: stretch;
}

.layout-justify-items-flex-start {
    justify-items: flex-start;
}

.layout-justify-items-flex-end {
    justify-items: flex-end;
}

/* justify self */
.layout-justify-self-center {
    justify-self: center;
}

.layout-justify-self-start {
    justify-self: start;
}

.layout-justify-self-end {
    justify-self: end;
}

.layout-justify-self-stretch {
    justify-self: stretch;
}

.layout-justify-self-flex-start {
    justify-self: flex-start;
}

.layout-justify-self-flex-end {
    justify-self: flex-end;
}

/* align content */
.layout-align-content-center {
    align-content: center;
}

.layout-align-content-start {
    align-content: start;
}

.layout-align-content-end {
    align-content: end;
}

.layout-align-content-stretch {
    align-content: stretch;
}

.layout-align-content-flex-start {
    align-content: flex-start;
}

.layout-align-content-flex-end {
    align-content: flex-end;
}

/* align items */
.layout-align-items-center {
    align-items: center;
}

.layout-align-items-start {
    align-items: start;
}

.layout-align-items-end {
    align-items: end;
}

.layout-align-items-stretch {
    align-items: stretch;
}

.layout-align-items-flex-start {
    align-items: flex-start;
}

.layout-align-items-flex-end {
    align-items: flex-end;
}

/* align self */
.layout-align-self-center {
    align-self: center;
}

.layout-align-self-flex-start {
    align-self: flex-start;
}

.layout-align-self-flex-end {
    align-self: flex-end;
}

/* border */
.layout-border-bottom-content {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-image: linear-gradient(to right, transparent 5%, black 40%, black 60%, transparent 95%) 1;
}

.layout-border-menu {
    border-radius: 20px 20px 0px 0px;
}

.layout-border-menu[data-menu-state="active"] {
    border-top-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    border-top-width: 3px;
    border-left-width: 3px;
    border-right-width: 3px;
}

.layout-content {
    border-style: solid;
    border-width: 3px;
}

.layout-rounded-border {
    border-radius: 20px;
}

.layout-rounded-border[data-rounded-border="menu-open"] {
    border-radius: 20px 20px 0px 0px;
}

.layout-circle {
    border-radius: 50%;
}

/* misc */
.layout-overflow-x-auto {
    overflow-x: auto;
}

.layout-overflow-x-hidden {
    overflow-x: hidden;
}

.layout-user-select-none {
    user-select: none;
}

.layout-clamp-margin-left {
    margin-left: clamp(20px, 1.5%, 350px);
}

.layout-clamp-margin-right {
    margin-right: clamp(20px, 1.5%, 350px);
}

.layout-clamp-padding-left {
    padding-left: clamp(20px, 1.5%, 350px);
}

.layout-clamp-padding-right {
    padding-right: clamp(20px, 1.5%, 350px);
}

.layout-text-align-justify {
    text-align: justify;
}