/**
 * Base
 *
 * `src/styles/base.styl`
 *
 * Common styles used in the demo pages.
 *
 * Weight: -80
 *
 * Styleguide: base
 */

global-reset()

/**
 * Texts
 *
 * Basic styles for texts.
 *
 * Styleguide: base.1
 */

/**
 * Plain text
 *
 * Plain text styles
 *
 * the base font is about `10px` size with `$base-black` color
 *
 * Styleguide: base.1.1
 */
html
  font-size: 62.5%
  height: 100%

body
  color: $base-black
  min-height: 100%
  position: relative

/**
 * Link
 *
 * `<a>` element's base styles.
 *
 * :hover - hover state
 * .active - active state (used in the nav)
 *
 * Markup: a(class='#{modifier_class}') link
 *
 * Styleguide: base.1.2
 */
a
  color: $sub-color
  text-decoration: none

  &:hover,
  &.pseudo-class-hover
    // color: $sub-color
    text-decoration: underline

  &.active
    font-weight: bold

/**
 * Blocks
 *
 * Basic styles for block elements.
 *
 * Styleguide: base.2
 */

/**
 * Section
 *
 * `<section>` element's base styles.
 *
 * Markup: section this is section
 *
 * Styleguide: base.2.1
 */
section
  margin-bottom: 2.5em

/**
 * Headings
 *
 * `<h2>` `<h3>` elements' base styles.
 *
 * Markup:
 * h2(class='heading') this is h2
 * h3(class='heading') this is h3
 *
 * Styleguide: base.2.2
 */
h2.heading
  border-left: 5px solid $main-color
  font-size: 2rem
  font-weight: bold
  margin-bottom: 1.5em
  padding: 0.5em 0.2em 0.5em 0.8em

h3.heading
  border-left: 0.2em solid $main-color
  font-size: 1.4rem
  font-weight: bold
  margin-bottom: 1em
  padding: 0.3em 0.2em 0.3em 0.8em

/**
 * Forms
 *
 * Basic styles for form related elements
 *
 * Styleguide: base.3
 */

/**
 * Button
 *
 * `<button>` element's base styles.
 *
 * :hover - hover state
 * :active - active state
 *
 * Markup:
 * button(class='#{modifier_class}') button
 * button(class='button-sub #{modifier_class}') button.button-sub
 *
 * Styleguide: base.3.1
 */
button
  form-base($main-color, $main-color)
  color: #fff
  margin-right: 0.5em
  padding: $form-input-spacing 1em

  &:hover,
  &.pseudo-class-hover
    opacity: $form-hover-opacity

  &:active,
  &.pseudo-class-active
    background-color: #fff
    color: $main-color
    opacity: 1

  &.button-sub
    background-color: _bg-sub = $sub-color
    border-color: _bg-sub

    &:active
    &.pseudo-class-active
      background-color: #fff
      color: _bg-sub

/**
 * Input - texts
 *
 * `<input>` element's base styles with `type="text"` and `type="password"`.
 *
 * :focus - focus state
 *
 * Markup:
 * input(type='text' class='#{modifier_class}' placeholder='text')
 * input(type='password' class='#{modifier_class}' placeholder='password')
 *
 * Styleguide: base.3.2
 */
input[type='text'],
input[type="password"]
  form-base()
  height: ($form-input-spacing * 2 + 1em)
  padding: 0 $form-input-spacing

  &:focus,
  &.pseudo-class-focus
    border-color: $main-color

/**
 * Textarea
 *
 * `<textarea>` element's base styles.
 *
 * :focus - focus state
 *
 * Markup:
 * textarea(class='#{modifier_class}' placeholder='textarea')
 *
 * Styleguide: base.3.3
 */
textarea
  form-base()
  height: 180px
  line-height: 1.5
  padding: $form-input-spacing
  width: 250px

  &:focus,
  &.pseudo-class-focus
    border-color: $main-color