// =============================================================================
// TYPO3 FRAME-SPACE UTILITY CLASSES
// These class names match what TYPO3 outputs when a content editor selects a
// "Space Before" / "Space After" value in the Appearance tab of a CE.
// Include these classes in the TYPO3 Fluid layout/partial wrapping each CE.
// =============================================================================

@import 'tokens';

// Space Before (margin-top)
.frame-space-before-none         { margin-top: $typo3-space-none; }
.frame-space-before-extra-small  { margin-top: $typo3-space-extra-small; }
.frame-space-before-small        { margin-top: $typo3-space-small; }
.frame-space-before-medium       { margin-top: $typo3-space-medium; }
.frame-space-before-large        { margin-top: $typo3-space-large; }
.frame-space-before-extra-large  { margin-top: $typo3-space-extra-large; }

// Space After (margin-bottom)
.frame-space-after-none          { margin-bottom: $typo3-space-none; }
.frame-space-after-extra-small   { margin-bottom: $typo3-space-extra-small; }
.frame-space-after-small         { margin-bottom: $typo3-space-small; }
.frame-space-after-medium        { margin-bottom: $typo3-space-medium; }
.frame-space-after-large         { margin-bottom: $typo3-space-large; }
.frame-space-after-extra-large   { margin-bottom: $typo3-space-extra-large; }