@use 'theme';

.flex {
    flex: 1 1 auto;
}

.hide {
    display: none;
}

.row {
    margin-bottom: theme.$big-gap;
    .container {
        margin: auto;
        padding-left: theme.$gap;
        padding-right: theme.$gap;

        &-1000px {
            max-width: 1000px;
            margin: auto;
            padding-left: theme.$gap;
            padding-right: theme.$gap;
        }

        &-1600px {
            max-width: 1600px;
            margin: auto;
            padding-left: theme.$gap;
            padding-right: theme.$gap;
        }

        &-90perc {
            max-width: 90%;
            margin: auto;
            padding-left: theme.$gap;
            padding-right: theme.$gap;
        }

        &-80perc {
            margin: auto;
            max-width: 80%;
            padding-left: theme.$gap;
            padding-right: theme.$gap;
        }
    }
}

.align-start {
    align-items: flex-start !important;
}

.wrap {
    flex-wrap: wrap;
}

.layout-row {
    display: flex;
    flex-direction: row;
    align-items: center;

    & > * {
        min-height: 0;
    }

    &.stretch {
        align-items: stretch;
    }

    &.small-gap > *:not(:last-child) {
        margin-right: theme.$small-gap;
    }

    &.gap > *:not(:last-child) {
        margin-right: theme.$gap;
    }

    &.big-gap > *:not(:last-child) {
        margin-right: theme.$big-gap;
    }

}

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

    & > * {
        min-height: 0;
    }

    &.stretch {
        align-items: stretch;
    }

    &.small-gap > *:not(:last-child) {
        margin-bottom: theme.$small-gap;
    }

    &.gap > *:not(:last-child) {
        margin-bottom: theme.$gap;
    }

    &.big-gap > *:not(:last-child) {
        margin-bottom: theme.$big-gap;
    }
}

.no-margin {
    margin: 0 !important;
}

.margin {
    margin: theme.$gap !important;
}

.margin-v {
    margin-top: theme.$gap !important;
    margin-bottom: theme.$gap !important;
}

.no-padding {
    padding: 0 !important;
}

.padding {
    padding: theme.$gap !important;
}

.padding-v {
    padding-top: theme.$gap !important;
    padding-bottom: theme.$gap !important;
}

