@import '../../layout/page/pageVariables';

$prefixDrawerDataCards: drawer--data_cards;
$prefixPageDataCards: page--data_cards;
$prefixDrawerDataCard: drawer--data_card;
$prefixPageDataCard: page--data_card;

.ui {
    &.#{$prefixDrawerDataCards} {
        margin-top: -33px;
        margin: 11px 0 !important; // sass-lint:disable-line no-important
    }
    &.#{$prefixPageDataCards} {
        margin: 0 -#{$pageGutterSm};
        padding: 0 #{$pageGutterSm};
    }
    .#{$prefixDrawerDataCard}, .#{$prefixPageDataCard} {
        margin: 11px 0 !important; // sass-lint:disable-line no-important
        &_inner_container {
            display: flex !important; // sass-lint:disable-line no-important
            flex-wrap: wrap !important; // sass-lint:disable-line no-important
            margin: -11px -27px -22px !important; // sass-lint:disable-line no-important
        }
        &_column {
            padding: 0 16px 11px;
        }
    }
}

@media only screen and (min-width: 768px) {
    .ui {
        &.#{$prefixDrawerDataCards} {
            margin: 0 -11px !important; // sass-lint:disable-line no-important
        }
        &.#{$prefixPageDataCards} {
            margin: 0 -#{$pageGutter496};
            padding: 0 #{$pageGutter496};
        }
        .#{$prefixDrawerDataCard}, .#{$prefixPageDataCard} {
            &_inner_container {
                margin: 0 -16px -11px !important; // sass-lint:disable-line no-important
            }
        }
    }
}