@compactGutterWidth: 1rem;
@veryCompactGutterWidth: .5rem;
@compactRowSpacing: 1rem;
@veryCompactRowSpacing: .5rem;
/*----------------------
    Compact Grid
-----------------------*/

.ui.compact.grid {
    margin-left: -(@compactGutterWidth / 2);
    margin-right: -(@compactGutterWidth / 2);
    margin-top: -(@compactRowSpacing / 2);
    margin-bottom: -(@compactRowSpacing / 2);
}

    .ui.compact.grid > .column:not(.row),
    .ui.compact.grid > .row > .column,
    .ui.grid > .compact.row > .column {
        padding-left: (@compactGutterWidth / 2);
        padding-right: (@compactGutterWidth / 2);
    }

    .ui.compact.grid .row + .ui.divider,
    .ui.grid .compact.row + .ui.divider {
        margin-left: (@compactGutterWidth / 2);
        margin-right: (@compactGutterWidth / 2);
        margin: (@compactRowSpacing / 2) (@gutterWidth / 2);
    }

.ui.compact[class*="vertically divided"].grid > .row:before {
    margin-left: (@compactGutterWidth / 2);
    margin-right: (@compactGutterWidth / 2);
    width: ~"calc(100% - "@compactGutterWidth~")";
}

.ui.compact.grid > .row {
    padding-top: (@compactRowSpacing / 2);
    padding-bottom: (@compactRowSpacing / 2);
}

.ui.compact.grid > .column:not(.row) {
    padding-top: (@compactRowSpacing / 2);
    padding-bottom: (@compactRowSpacing / 2);
}

.ui.compact.grid .column + .ui.vertical.divider {
    height: ~"calc(50% - "(@compactRowSpacing/2)~")";
}

.ui[class*="vertically divided"].grid > .column:not(.row),
.ui[class*="vertically divided"].grid > .row > .column {
    margin-top: (@compactRowSpacing / 2);
    margin-bottom: (@compactRowSpacing / 2);
}

.ui.compact.grid > .row > .red.column,
.ui.compact.grid > .row > .orange.column,
.ui.compact.grid > .row > .yellow.column,
.ui.compact.grid > .row > .olive.column,
.ui.compact.grid > .row > .green.column,
.ui.compact.grid > .row > .teal.column,
.ui.compact.grid > .row > .blue.column,
.ui.compact.grid > .row > .violet.column,
.ui.compact.grid > .row > .purple.column,
.ui.compact.grid > .row > .pink.column,
.ui.compact.grid > .row > .brown.column,
.ui.compact.grid > .row > .grey.column,
.ui.compact.grid > .row > .black.column {
    margin-top: -(@compactRowSpacing / 2);
    margin-bottom: -(@compactRowSpacing / 2);
    padding-top: (@compactRowSpacing / 2);
    padding-bottom: (@compactRowSpacing / 2);
}

/* Tablet Only */
@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
    .ui.compact.grid > .doubling.row > .column,
    .ui.doubling.grid > .row > .column {
        padding-top: (@compactRowSpacing / 2) !important;
        padding-bottom: (@compactRowSpacing / 2) !important;
    }
}

/* Mobile Only */
@media only screen and (max-width: @largestMobileScreen) {
    .ui.compact.grid > .doubling.row > .column,
    .ui.doubling.grid > .row > .column {
        padding-top: (@compactRowSpacing / 2) !important;
        padding-bottom: (@compactRowSpacing / 2) !important;
    }
}


/*----------------------
  Very Compact Grid
-----------------------*/

.ui.very.compact.grid {
    margin-left: -(@veryCompactGutterWidth / 2);
    margin-right: -(@veryCompactGutterWidth / 2);
    margin-top: -(@veryCompactRowSpacing / 2);
    margin-bottom: -(@veryCompactRowSpacing / 2);
}

    .ui.very.compact.grid > .column:not(.row),
    .ui.very.compact.grid > .row > .column,
    .ui.grid > .very.compact.row > .column {
        padding-left: (@veryCompactGutterWidth / 2);
        padding-right: (@veryCompactGutterWidth / 2);
    }

    .ui.very.compact.grid .row + .ui.divider,
    .ui.grid .very.compact.row + .ui.divider {
        margin-left: (@veryCompactGutterWidth / 2);
        margin-right: (@veryCompactGutterWidth / 2);
        margin: (@veryCompactRowSpacing / 2) (@gutterWidth / 2);
    }

.ui.very.compact[class*="vertically divided"].grid > .row:before {
    margin-left: (@veryCompactGutterWidth / 2);
    margin-right: (@veryCompactGutterWidth / 2);
    width: ~"calc(100% - "@veryCompactGutterWidth~")";
}

.ui.very.compact.grid > .row {
    padding-top: (@veryCompactRowSpacing / 2);
    padding-bottom: (@veryCompactRowSpacing / 2);
}

.ui.very.compact.grid > .column:not(.row) {
    padding-top: (@veryCompactRowSpacing / 2);
    padding-bottom: (@veryCompactRowSpacing / 2);
}

.ui.very.compact.grid .column + .ui.vertical.divider {
    height: ~"calc(50% - "(@veryCompactRowSpacing/2)~")";
}

.ui[class*="vertically divided"].grid > .column:not(.row),
.ui[class*="vertically divided"].grid > .row > .column {
    margin-top: (@veryCompactRowSpacing / 2);
    margin-bottom: (@veryCompactRowSpacing / 2);
}

.ui.very.compact.grid > .row > .red.column,
.ui.very.compact.grid > .row > .orange.column,
.ui.very.compact.grid > .row > .yellow.column,
.ui.very.compact.grid > .row > .olive.column,
.ui.very.compact.grid > .row > .green.column,
.ui.very.compact.grid > .row > .teal.column,
.ui.very.compact.grid > .row > .blue.column,
.ui.very.compact.grid > .row > .violet.column,
.ui.very.compact.grid > .row > .purple.column,
.ui.very.compact.grid > .row > .pink.column,
.ui.very.compact.grid > .row > .brown.column,
.ui.very.compact.grid > .row > .grey.column,
.ui.very.compact.grid > .row > .black.column {
    margin-top: -(@veryCompactRowSpacing / 2);
    margin-bottom: -(@veryCompactRowSpacing / 2);
    padding-top: (@veryCompactRowSpacing / 2);
    padding-bottom: (@veryCompactRowSpacing / 2);
}

/* Tablet Only */
@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
    .ui.very.compact.grid > .doubling.row > .column,
    .ui.doubling.grid > .row > .column {
        padding-top: (@veryCompactRowSpacing / 2) !important;
        padding-bottom: (@veryCompactRowSpacing / 2) !important;
    }
}

/* Mobile Only */
@media only screen and (max-width: @largestMobileScreen) {
    .ui.very.compact.grid > .doubling.row > .column,
    .ui.doubling.grid > .row > .column {
        padding-top: (@veryCompactRowSpacing / 2) !important;
        padding-bottom: (@veryCompactRowSpacing / 2) !important;
    }
}