/**
 * Mixins
 *
 * `src/styles/mixins.styl`
 *
 * Mixins used in demo pages.
 *
 * Weight: -90
 *
 * Styleguide: mixins
 */

/**
 * content-block()
 *
 * Outputs the base styles for immediate children of the App component.
 *
 * Styleguide: mixins.1
 */
content-block()
  box-sizing: border-box
  margin: 0 auto
  max-width: $max-width
  padding: ($block-spacing + 10px) $block-spacing ($block-spacing * 2.5)
  text-align: left
  width: 100%

/**
 * form-base(_bg-color, _border-color)
 *
 * Outputs the base settings for the form related elements.
 *
 * _bg-color - background color. *Default: `#fff`*
 * _border-color - border color. *Default: `rbga(#000, $border-opacity)`*
 *
 *
 * Styleguide: mixins.2
 */
form-base(_bg-color = #fff, _border-color = rgba(#000, $border-opacity))
  background-color: _bg-color
  border: 1px solid _border-color
  border-radius: $form-border-radius
  font-size: 1.4rem
  line-height: 1
  outline: none