@space-xs: 0.6rem;
@space-sm: 1rem;
@space-md: 1.6rem;
@space-lg: 2.5rem;
@space-xl: 4rem;

.layout {
    display: flex;
    flex-direction: row;

    &.layout-nowrap {
        white-space: nowrap;
    }

    &.layout-action {
        cursor: pointer;
    }

    & > *:not([type="checkbox"]):not([type="radio"]) {
        max-width: 100%;
    }

    &.layout-gap-xs {
        gap: @space-xs;
    }

    &.layout-gap-sm {
        gap: @space-sm;
    }

    &.layout-gap-md {
        gap: @space-md;
    }

    &.layout-gap-lg {
        gap: @space-lg;
    }

    &.layout-gap-xl {
        gap: @space-xl;
    }

    &.layout-vertical {
        flex-direction: column;
    }

    &.layout-stretch {
        flex-grow: 1;
    }

    &.layout-wrap {
        flex-wrap: wrap;

        & > .layout {
            flex-grow: 1;
        }
    }

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

    &.justify-content-center {
        justify-content: center;
    }

    &.justify-content-space-between {
        justify-content: space-between;
    }

    &.justify-content-space-around {
        justify-content: space-around;
    }

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

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

    &.align-items-center {
        align-items: center;
    }

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

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

    &.align-self-start {
        align-self: start;

        @media (max-width: 768px) {
            &:not(.layout-nowrap) {
                flex-direction: column;
            }
        }
    }

    &.align-self-center {
        align-self: center;
    }

    &.align-self-end {
        align-self: end;
    }

    &.align-self-stretch {
        align-self: stretch;
    }

    .layout-scrollable {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
    }
}

.p-xs {
    padding: @space-xs;
}
.p-sm {
    padding: @space-sm;
}
.p-md {
    padding: @space-md;
}
.p-lg {
    padding: @space-lg;
}
.p-xl {
    padding: @space-xl;
}

.pt-xs {
    padding-top: @space-xs;
}
.pr-xs {
    padding-right: @space-xs;
}
.pb-xs {
    padding-bottom: @space-xs;
}
.pl-xs {
    padding-left: @space-xs;
}

.pt-sm {
    padding-top: @space-sm;
}
.pr-sm {
    padding-right: @space-sm;
}
.pb-sm {
    padding-bottom: @space-sm;
}
.pl-sm {
    padding-left: @space-sm;
}

.pt-md {
    padding-top: @space-md;
}
.pr-md {
    padding-right: @space-md;
}
.pb-md {
    padding-bottom: @space-md;
}
.pl-md {
    padding-left: @space-md;
}

.pt-lg {
    padding-top: @space-lg;
}
.pr-lg {
    padding-right: @space-lg;
}
.pb-lg {
    padding-bottom: @space-lg;
}
.pl-lg {
    padding-left: @space-lg;
}

.pt-xl {
    padding-top: @space-xl;
}
.pr-xl {
    padding-right: @space-xl;
}
.pb-xl {
    padding-bottom: @space-xl;
}
.pl-xl {
    padding-left: @space-xl;
}

.m-xs {
    margin: @space-xs;
}
.m-sm {
    margin: @space-sm;
}
.m-md {
    margin: @space-md;
}
.m-lg {
    margin: @space-lg;
}
.m-xl {
    margin: @space-xl;
}

.mt-xs {
    margin-top: @space-xs;
}
.mr-xs {
    margin-right: @space-xs;
}
.mb-xs {
    margin-bottom: @space-xs;
}
.ml-xs {
    margin-left: @space-xs;
}

.mt-sm {
    margin-top: @space-sm;
}
.mr-sm {
    margin-right: @space-sm;
}
.mb-sm {
    margin-bottom: @space-sm;
}
.ml-sm {
    margin-left: @space-sm;
}

.mt-md {
    margin-top: @space-md;
}
.mr-md {
    margin-right: @space-md;
}
.mb-md {
    margin-bottom: @space-md;
}
.ml-md {
    margin-left: @space-md;
}

.mt-lg {
    margin-top: @space-lg;
}
.mr-lg {
    margin-right: @space-lg;
}
.mb-lg {
    margin-bottom: @space-lg;
}
.ml-lg {
    margin-left: @space-lg;
}

.mt-xl {
    margin-top: @space-xl;
}
.mr-xl {
    margin-right: @space-xl;
}
.mb-xl {
    margin-bottom: @space-xl;
}
.ml-xl {
    margin-left: @space-xl;
}
