@charset "utf-8"

@import "controls"
@import "buttons"
@import "titles"
@import "images"
@import "messages"
@import "notifications"

.box
  background: white
  border-radius: 5px
  box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
  padding: 20px

.delete
  +unselectable
  -moz-appearance: none
  -webkit-appearance: none
  background: rgba(black, 0.2)
  border: none
  border-radius: 290486px
  cursor: pointer
  display: inline-block
  height: 24px
  position: relative
  vertical-align: top
  width: 24px
  &:before,
  &:after
    background: white
    content: ""
    display: block
    height: 2px
    left: 50%
    margin-left: -25%
    margin-top: -1px
    position: absolute
    top: 50%
    width: 50%
  &:before
    transform: rotate(45deg)
  &:after
    transform: rotate(-45deg)
  &:hover
    background: $red
  &.is-small
    height: 16px
    width: 16px
  &.is-medium
    height: 32px
    width: 32px
  &.is-large
    height: 40px
    width: 40px

.icon
  +fa(21px, 24px)
  .fa
    font-size: inherit
    line-height: inherit
  &.is-small
    +fa(14px, 20px)
  &.is-medium
    +fa(28px, 32px)
  &.is-large
    +fa(42px, 48px)

.hamburger
  cursor: pointer
  display: block
  height: 50px
  position: relative
  width: 50px
  span
    background: $text
    display: block
    height: 1px
    left: 50%
    margin-left: -7px
    position: absolute
    top: 50%
    transition: none $speed $easing
    transition-property: background, left, opacity, transform
    width: 15px
    &:nth-child(1)
      margin-top: -6px
    &:nth-child(2)
      margin-top: -1px
    &:nth-child(3)
      margin-top: 4px
  &:hover
    background: $background
  &.is-active
    span
      background: $link
      &:nth-child(1)
        margin-left: -5px
        transform: rotate(45deg)
        transform-origin: left top
      &:nth-child(2)
        opacity: 0
      &:nth-child(3)
        margin-left: -5px
        transform: rotate(-45deg)
        transform-origin: left bottom
  +tablet
    height: $header-height
    width: $header-height

.heading
  display: block
  font-size: 11px
  letter-spacing: 1px
  margin-bottom: 5px
  text-transform: uppercase

.highlight
  @extend .block
  font-size: 12px
  font-weight: normal
  max-width: 100%
  overflow: hidden
  padding: 0
  pre
    overflow: auto
    max-width: 100%

.image
  display: block
  position: relative
  vertical-align: top
  img
    +overlay
    display: block
    width: 100%
  &.is-3x2
    padding-top: 66.6666%

.loader
  animation: spin-around 500ms infinite linear
  border: 2px solid $border
  border-radius: 290486px
  border-right-color: transparent
  border-top-color: transparent
  content: ""
  display: block
  height: 16px
  position: relative
  width: 16px

.number
  background: $background
  border-radius: 290486px
  display: inline-block
  font-size: $size-medium
  vertical-align: top

.tag
  background: $background
  border-radius: $radius
  box-shadow: inset 0 -1px 0 rgba(black, 0.1)
  color: $text
  display: inline-block
  font-size: 12px
  height: 24px
  line-height: 16px
  padding: 4px 10px
  vertical-align: top
  white-space: nowrap
  &.is-dark
    background: $text
    color: $text-invert
  &.is-rounded
    border-radius: 290486px
  &.is-medium
    box-shadow: inset 0 -2px 0 rgba(black, 0.1)
    font-size: $size-normal
    height: 32px
    padding: 7px 14px 9px
  &:not(.is-large)
    .delete
      @extend .delete.is-small
      margin-left: 4px
      margin-right: -6px
  &.is-large
    box-shadow: inset 0 -2px 0 rgba(black, 0.1)
    font-size: $size-5
    height: 40px
    line-height: 24px
    padding: 7px 18px 9px
    .delete
      margin-left: 4px
      margin-right: -8px
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    $color-invert: nth($pair, 2)
    &.is-#{$name}
      background: $color
      color: $color-invert