// Clearfix (Contain floats)
@mixin emma-cf($important: $emma-important) {
  &::after { content: ""; display: table; clear: both; }
}

// Text truncation (ellipsis)
@mixin emma-tetr($important: $emma-important) {
  overflow: hidden #{emma-important($important)};
  text-overflow: ellipsis #{emma-important($important)};
  white-space: nowrap #{emma-important($important)};
  word-wrap: normal #{emma-important($important)};
}

// Text hiding
@mixin emma-tehi($important: $emma-important) {
  overflow: hidden #{emma-important($important)};
  text-indent: 200% #{emma-important($important)};
  white-space: nowrap #{emma-important($important)};
}

// Reset list
@mixin emma-reli($important: $emma-important) {
  list-style-type: none #{emma-important($important)};
  padding-left: 0 #{emma-important($important)};
  margin-top: 0 #{emma-important($important)};
  margin-bottom: 0 #{emma-important($important)};
}

// Default ol
@mixin emma-deol($important: $emma-important) {
  list-style-type: decimal #{emma-important($important)};
  padding-left: 40px #{emma-important($important)};
  padding-left: 40px #{emma-important($important)};
  margin-top: 1em #{emma-important($important)};
  margin-bottom: 1em #{emma-important($important)};
}

// Default ul
@mixin emma-deul($important: $emma-important) {
  list-style-type: disc #{emma-important($important)};
  padding-left: 40px #{emma-important($important)};
  padding-left: 40px #{emma-important($important)};
  margin-top: 1em #{emma-important($important)};
  margin-bottom: 1em #{emma-important($important)};
}

// Center X & Y
@mixin emma-cxcy($important: $emma-important) {
  display: flex #{emma-important($important)};
  align-items: center #{emma-important($important)};
  justify-content: center #{emma-important($important)};
}

@mixin emma-mx0($important: $emma-important) {
  margin-left: 0 #{emma-important($important)};
  margin-right: 0 #{emma-important($important)};
}

@mixin emma-my0($important: $emma-important) {
  margin-top: 0 #{emma-important($important)};
  margin-bottom: 0 #{emma-important($important)};
}

@mixin emma-mx-a($important: $emma-important) {
  margin-left: auto #{emma-important($important)};
  margin-right: auto #{emma-important($important)};
}

@mixin emma-my-a($important: $emma-important) {
  margin-top: auto #{emma-important($important)};
  margin-bottom: auto #{emma-important($important)};
}

@mixin emma-mx-xs($important: $emma-important) {
  margin-left: $emma-margin-xs #{emma-important($important)};
  margin-right: $emma-margin-xs #{emma-important($important)};
}

@mixin emma-my-xs($important: $emma-important) {
  margin-top: $emma-margin-xs #{emma-important($important)};
  margin-bottom: $emma-margin-xs #{emma-important($important)};
}

@mixin emma-mx-sm($important: $emma-important) {
  margin-left: $emma-margin-sm #{emma-important($important)};
  margin-right: $emma-margin-sm #{emma-important($important)};
}

@mixin emma-my-sm($important: $emma-important) {
  margin-top: $emma-margin-sm #{emma-important($important)};
  margin-bottom: $emma-margin-sm #{emma-important($important)};
}

@mixin emma-mx-md($important: $emma-important) {
  margin-left: $emma-margin-md #{emma-important($important)};
  margin-right: $emma-margin-md #{emma-important($important)};
}

@mixin emma-my-md($important: $emma-important) {
  margin-top: $emma-margin-md #{emma-important($important)};
  margin-bottom: $emma-margin-md #{emma-important($important)};
}

@mixin emma-mx-lg($important: $emma-important) {
  margin-left: $emma-margin-lg #{emma-important($important)};
  margin-right: $emma-margin-lg #{emma-important($important)};
}

@mixin emma-my-lg($important: $emma-important) {
  margin-top: $emma-margin-lg #{emma-important($important)};
  margin-bottom: $emma-margin-lg #{emma-important($important)};
}

@mixin emma-mx-xl($important: $emma-important) {
  margin-left: $emma-margin-xl #{emma-important($important)};
  margin-right: $emma-margin-xl #{emma-important($important)};
}

@mixin emma-my-xl($important: $emma-important) {
  margin-top: $emma-margin-xl #{emma-important($important)};
  margin-bottom: $emma-margin-xl #{emma-important($important)};
}

@mixin emma-px0($important: $emma-important) {
  padding-left: 0 #{emma-important($important)};
  padding-right: 0 #{emma-important($important)};
}

@mixin emma-py0($important: $emma-important) {
  padding-top: 0 #{emma-important($important)};
  padding-bottom: 0 #{emma-important($important)};
}

@mixin emma-px-xs($important: $emma-important) {
  padding-left: $emma-padding-xs #{emma-important($important)};
  padding-right: $emma-padding-xs #{emma-important($important)};
}

@mixin emma-py-xs($important: $emma-important) {
  padding-top: $emma-padding-xs #{emma-important($important)};
  padding-bottom: $emma-padding-xs #{emma-important($important)};
}

@mixin emma-px-sm($important: $emma-important) {
  padding-left: $emma-padding-sm #{emma-important($important)};
  padding-right: $emma-padding-sm #{emma-important($important)};
}

@mixin emma-py-sm($important: $emma-important) {
  padding-top: $emma-padding-sm #{emma-important($important)};
  padding-bottom: $emma-padding-sm #{emma-important($important)};
}

@mixin emma-px-md($important: $emma-important) {
  padding-left: $emma-padding-md #{emma-important($important)};
  padding-right: $emma-padding-md #{emma-important($important)};
}

@mixin emma-py-md($important: $emma-important) {
  padding-top: $emma-padding-md #{emma-important($important)};
  padding-bottom: $emma-padding-md #{emma-important($important)};
}

@mixin emma-px-lg($important: $emma-important) {
  padding-left: $emma-padding-lg #{emma-important($important)};
  padding-right: $emma-padding-lg #{emma-important($important)};
}

@mixin emma-py-lg($important: $emma-important) {
  padding-top: $emma-padding-lg #{emma-important($important)};
  padding-bottom: $emma-padding-lg #{emma-important($important)};
}

@mixin emma-px-xl($important: $emma-important) {
  padding-left: $emma-padding-xl #{emma-important($important)};
  padding-right: $emma-padding-xl #{emma-important($important)};
}

@mixin emma-py-xl($important: $emma-important) {
  padding-top: $emma-padding-xl #{emma-important($important)};
  padding-bottom: $emma-padding-xl #{emma-important($important)};
}

@mixin emma-fsm-a($important: $emma-important) {
  -webkit-font-smoothing: antialiased #{emma-important($important)};
  -moz-osx-font-smoothing: grayscale #{emma-important($important)};
}