@use "sass:map";
@import './vars';

.cm-list {
    .cm-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: map.get($cm-space, sm);
        display: flex;
        flex-direction: row;
        align-items: top;
        justify-items: flex-end;

        @media (min-width: $cm-tablet) {
            span.cm-is-action {
                display: none;
            }

            &:hover {
                span.cm-is-action {
                    display: inline-block;
                }
            }
        }

        &:last-child {
            border-bottom: 0;
        }

        &:nth-child(2n) {
            @include var(background-color, light1);
        }

        &.cm-is-header {
            font-weight: 600;
            margin-bottom: map.get($cm-space, xs);
            background: none;
        }

        &.cm-is-card {
            @include var(background-color, white1);
            @include var(border-radius, border-radius);
            box-shadow: $cm-box-shadow-dark-sm;
            margin-bottom: map.get($cm-space, lg);
        }

        &.cm-is-clickable {
            cursor: pointer;
        }

        &.cm-is-expandable {
            cursor: pointer;
        }

        form {
            margin: 0;

            label.label {
                font-weight: 300;
            }
        }

        span.cm-is-action {
            position: absolute;
            right: 1rem;
            top: 1rem;
        }

        .cm-col {
            align-content: center;
            flex-basis: 0;
            margin: map.get($cm-space, sm);
            flex-grow: 1;

            &.cm-is-xs {
                flex-grow: 1;
            }

            &.cm-is-sm {
                flex-grow: 2;
            }

            &.cm-is-md {
                flex-grow: 5;
            }

            &.cm-is-lg {
                flex-grow: 10;
            }

            &.cm-is-xl {
                flex-grow: 20;
            }

            &.cm-is-icon {
                flex-basis: 50px;
                text-align: right;
                flex-grow: 0;
            }
        }

        .cm-content {
            flex: 10;
        }
    }
}