/**
 * Layouts for tables/lists
 *
 * Breakpoints for arranging elements
 *
 */

@use '../../../global/sass/partials/mixins';

/* -------------------- Tables -------------------- */

/* 30-70 standard for lists, first item is title */
.cb-col-30-70 {
    > :nth-child(odd) {
        /* this is the title column , e.g. "Name" */
        font-weight: bold;
    }

    @include mixins.breakpoint(phablet) {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;

        > :nth-child(odd) {
            width: 30%;
        }
        > :nth-child(even) {
            width: 70%;
        }
    }
}
/* 50-50 */
.cb-col-50-50 {
    @include mixins.breakpoint(phablet) {
        display: flex;
        > :nth-child(odd) {
            width: 50%;
            min-width: 0;
            img {
                width: 100%;
            }
        }
        > :nth-child(even) {
            width: 50%;
            min-width: 0;
        }
    }
}

.cb-col-50-50-filter {
    > div {
        margin-bottom: var(--commonsbooking-spacer);
        width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;

        label {
            flex: 0 0 30%;
        }
        input {
            flex: 0 1 50%;
        }
    }

    @include mixins.breakpoint(phablet) {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;

        flex-wrap: wrap;

        > div {
            width: 50%;
        }
    }
}

.cb-col-auto {
    /* 2 fixed cols, 1 flexible in the middle */

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    > div.cb-thumbnail {
        flex: 0 0 20%;
        padding-right: var(--commonsbooking-spacer-big);
    }
    > div.cb-list-info {
        flex: 1 0 50%;
        border: none;
    }
    > div.cb-action {
        /* optional */
        flex: 0 0 100%;
        text-align: right;
    }

    @include mixins.breakpoint(phablet) {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: nowrap;
        align-items: center;

        > div.cb-thumbnail {
            flex: 0 0 20%;
            padding-right: var(--commonsbooking-spacer-big);
        }
        > div.cb-list-info {
            flex: 1 1 auto;
            border: none;
        }
        > div.cb-action {
            flex: 1 0 auto;
            a {
                width: auto;
            }
        }
    }
}

.cb-col-list-with-image {
    /*first */

    display: flex;
    flex-direction: column;
}

.cb-col-20-50-30 {
    @include mixins.breakpoint(phablet) {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: nowrap;
        align-items: center;
    }
}

.cb-list-error {
    color: var(--commonsbooking-color-error);
    font-size: var(--commonsbooking-font-size-big);
}