MaxMilton/ekscss

// TODO: Split out the contents into other files?

/**
 * UTILITIES
 */

/* Width */

.mw100 { max-width: 100%; }
.w100 { width: 100%; }
.wi { width: initial; }

${x.fn.each(x.media, (bp, query) => xcss`
  @media ${query} {
    .${bp}-w100 { width: 100%; }
    .${bp}-wi { width: initial; }
  }
`)}

/* Text alignment */

.tl { text-align: left; }
.tr { text-align: right; }
.tc { text-align: center; }
.tu { text-align: unset; }

${x.fn.each(x.media, (bp, query) => xcss`
  @media ${query} {
    .${bp}-tl { text-align: left; }
    .${bp}-tr { text-align: right; }
    .${bp}-tc { text-align: center; }
    .${bp}-tu { text-align: unset; }
  }
`)}

/* Font variants and decoration */

.fwl { font-weight: ${x.textWeightLight}; }
.fwn { font-weight: ${x.textWeight}; }
.fwm { font-weight: ${x.textWeightMedium}; }

.fwh,
.bold { font-weight: ${x.textWeightHeavy}; }

.italic { font-style: italic; }

.underline { text-decoration: underline; }

.normal {
  font-style: normal;
  font-weight: ${x.textWeight};
  text-decoration: none;
}

.fss { font-size: 90%; }
.fsl { font-size: 140%; }

/* Text transform */

.ttc { text-transform: capitalize; }
.ttl { text-transform: lowercase; }
.ttu { text-transform: uppercase; }
.ttn { text-transform: none; }

/* Text wrapping */

.wsp { white-space: pre; }
.wspw { white-space: pre-wrap; }
.wsn { white-space: nowrap; }
.wsu { white-space: unset; }

/* Mouse */

.pen { pointer-events: none; }
.pea { pointer-events: auto; }

.hide-on-hover {
  backface-visibility: hidden; /* promote into own layer to avoid repaints */
  transition: opacity ${x.animateSpeedIn} ease-out;

  &:hover,
  &:focus {
    opacity: 0;
    transition-duration: ${x.animateSpeedOut};
  }
}

/* Borders */

.rounded { border-radius: ${x.radius}; }

/* Cursors */

.pointer { cursor: pointer; }
.help { cursor: help; }

/* Line height hacks */

.lh1 { line-height: 1; }
.lh0 { line-height: 0; }

/* Alignment */

.vam { vertical-align: middle; }
.vab { vertical-align: bottom; }