/**
  * This is where we'll declare any common styles such as spacing,
  * border-radius, font-size, font-boldness and stuff of that nature to be used
  * as classnames in a pinch.
  * Outro's is pretty good so I'll take it and refactor it a bit.
*/

/**
 * Add/remove floats
 */
.\+float-right   { float:right!important; }
.\+float-left    { float:left !important; }
.\+float-none    { float:none !important; }
.\+hundred-width { width:100% !important; }
.\+hundred-height { height:100% !important; }

/**
 * Text alignment and decoration
 */
.\+text-left     { text-align:left  !important; }
.\+text-center   { text-align:center!important; }
.\+text-right    { text-align:right !important; }
.\+underline { text-decoration: underline!important; }

/**
 * Misc.
 */
.\+inline        { display: inline-block !important; }
.\+whitespace-pre { white-space: pre; }


/**
 * Text colors
 */
.\+black-text { color: $color-black!important; }
.\+blue-text    { color: $color-blue !important; }
.\+green-text    { color: $color-green !important; }
.\+grey-text    { color: $color-grey !important; }
.\+red-text    { color: $color-red !important; }
.\+white-text   { color: $color-white !important; }

/**
 * Text sizes
 */
.\+text-smallest { font-size: $text-smallest; }
.\+text-small { font-size: $text-small; }
.\+text-medium { font-size: $text-medium; }
.\+text-large { font-size: $text-large; }
.\+text-largest { font-size: $text-largest; }


/**
 * Container display
 */
.\+display-flex { display: flex }
.\+flex-center-justify { display: flex; justify-content: center; }
.\+flex-center-center { display: flex; justify-content: center; align-items: center; }
.\+flex-row { display: flex; flex-direction: row }
.\+flex-wrap { flex-wrap: wrap; }
.\+flex-spread { display: flex; justify-content: space-between; }
.\+flex-column { display: flex; flex-direction: column; }
.\+flex-center-column { display: flex; align-items: center; flex-direction: column }
.\+flex-middle-column { display: flex; justify-content: center; flex-direction: column }
.\+middle-align { align-items: center; }


/**
 * Padding
 */
.\+soft { padding: $base-spacing-double!important; }
.\+soft-double { padding: $base-spacing-quad!important; }
.\+soft-top { padding-top: $base-spacing-double!important; }
.\+soft-top-double { padding-top: $base-spacing-quad!important; }
.\+no-padding { padding: 0!important; }

/**
 * Margins
 */
.\+push-top { margin-top: $base-spacing-quad!important; }
.\+push-double-top { margin-top: $base-spacing-quad * 2!important; }
.\+push-half-top { margin-top: $base-spacing-double!important; }
.\+push-quarter-top { margin-top: $base-spacing!important; }

.\+push-bottom { margin-bottom: $base-spacing-quad!important; }
.\+push-double-bottom { margin-bottom: $base-spacing-quad * 2!important; }
.\+push-half-bottom { margin-bottom: $base-spacing-double!important; }
.\+push-quarter-bottom { margin-bottom: $base-spacing!important; }


.\+push-left { margin-left: $base-spacing-quad!important; }
.\+push-double-left { margin-left: $base-spacing-quad * 2!important; }
.\+push-half-left { margin-left: $base-spacing-double!important; }
.\+push-quarter-left { margin-left: $base-spacing!important; }

.\+push-right { margin-right: $base-spacing-quad!important; }
.\+push-double-right { margin-right: $base-spacing-quad * 2!important; }
.\+push-half-right { margin-right: $base-spacing-double!important; }
.\+push-quarter-right { margin-right: $base-spacing!important; }

.\+push-self-right { margin-left: auto!important; }
.\+push-self-left { margin-right: auto!important; }

/*
 * Cursor styles
 */
.\+cursor-pointer { cursor: pointer; }
.\+cursor-default { cursor: default; }


/*
 * Font weight helpers
 */
.\+font-weight-semibold { font-weight: $font-weight-semibold!important; }
.\+font-weight-bold { font-weight: $font-weight-bold!important; }

/*
 * Vendor prefixer mixin. Auto-prefixes the rule with the appropriate vendor
 * prefixes for major browsers.
 *
 * Usage:
 * @include vendor(user-select, none);
 */
@mixin vendor($property, $value) {
    -webkit-#{$property}: $value;
    -moz-#{$property}: $value;
    -ms-#{$property}: $value;
    -o-#{$property}: $value;
    #{$property}: $value;
}

.\+no-select {
  @include vendor(user-select, none);
}