// Direct applications
// ===================
// Regardless of semantic or non-semantic usage, some styles
// Should be applied directly to classes or elements no matter
// what. This include should be included near the end of the
// import chain but before kickstart.sass to accomplish this.

body
  &.dismiss-modal
    cursor: pointer

[disabled]
  cursor: not-allowed

// Buttons
// -------

button,
input[type="submit"],
input[type="button"]
  +button

input[type="file"]
  background: transparent

// Doesn't work with commas. WTF?
// http://stackoverflow.com/questions/16982449/why-isnt-it-possible-to-combine-vendor-specific-pseudo-elements-classes-into-on
input[type="file"]::-ms-browse
  +button

input[type="file"]::-ms-value
  +input-styles
  background: white
  margin-right: $space/4

input[type="file"]::-webkit-file-upload-button
  +button

+dropdown_menu

// Forms
// -----

%error_message
  font-style: italic
  margin:
    top: 7px
    bottom: 14px

form
  .errors, .warnings, .successes
    p
      @extend %error_message

  .errors
    +field-colors(map-get($colors, red))

  .warnings
    +field-colors(map-get($colors, yellow))

  .successes
    +field-colors(map-get($colors, green))

  p
    &.error, &.warning, &.success
      @extend %error_message

  label, span, p
    &.error
      color: map-get($colors, red)

    &.warning
      color: map-get($colors, yellow)

    &.success
      color: map-get($colors, green)

  input, select
    &.error
      border-color: map-get($colors, red)

    &.warning
      border-color: map-get($colors, yellow)

    &.success
      border-color: map-get($colors, green)


// Growls
// ------

.growl_container
  position: fixed
  top: 0
  right: 0
  padding: $space/2
  z-index: 2000
  width: 300px
  overflow: auto
  max-height: 100vh

.growl
  box-shadow: 0px 0px $space/2 rgba(0, 0, 0, 0.5)
  transition: all 0.5s

  &.show, &.hide
    +fadeInDown

  &.hide
    animation-direction: reverse

  +growl

// Status
// ------

.status_bar
  +status_bar
    .status_bar-status
      +label

      &[data-type="status-red"]
        background: map-get($colors, red)

      &[data-type="status-orange"]
        background: map-get($colors, orange)

      &[data-type="status-yellow"]
        background: map-get($colors, yellow)
        color: map-get($black, lighter)

      &[data-type="status-green"]
        background: map-get($colors, green)

      &[data-type="status-blue"]
        background: map-get($colors, blue)

      &[data-type="status-violet"]
        background: map-get($colors, violet)

// Tabs
// ----

[data-panel]
  display: none

  &.open
    display: block

// Tooltips
// --------

=tooltip_base
  margin-bottom: 0
  position: absolute
  display: block
  opacity: 0
  bottom: 100%
  left: 50%
  margin-left: -20px
  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.25)
  pointer-events: none
  min-width: 100px
  text-align: center
  pointer-events: none
  transition: transform 0.25s

=tooltip_arrow
  border-top-style: solid
  border-top-width: 10px
  border-left: 10px solid transparent
  border-right: 10px solid transparent
  width: 0px
  height: 0px
  content: ' '
  display: block
  background: transparent
  position: absolute
  left: 50%
  margin-left: -8px
  pointer-events: none
  opacity: 0

=pseudo-tooltip-color($color: $primary-color)
  &:after
    +label($color)
    margin-bottom: 0

  &:before
    border-top-color: $color

=tooltip-classes

[data-ks-tooltip]
  position: relative

  +pseudo-tooltip-color

  &:after
    content: attr(data-ks-tooltip)
    +tooltip_base
    transform: translateY(0px)
    z-index: 10

  &:before
    +tooltip_arrow
    bottom: 100%
    z-index: 100

  &:hover
    &:after, &:before
      opacity: 1

    &:after
      transform: translateY(-8px)
      transition: transform 0.25s

  // Positioning

  &[data-ks-tooltip-position="bottom"]
    &:after
      top: 100%
      bottom: auto
      margin-top: 15px
      transform: translateY(-6px)

    &:before
      transform: rotate(180deg)
      top: 100%
      bottom: auto

  &[data-ks-tooltip-position="left"]
    &:after
      transform: translateY(6px)
      top: 50%
      bottom: auto
      margin:
        top: -19px
        right: 12px
      left: auto
      right: 100%

    &:before
      transform: rotate(-90deg)
      top: 50%
      margin-top: -6px
      bottom: auto
      left: auto
      right: 100%

  &[data-ks-tooltip-position="right"]
    &:after
      transform: translateY(6px)
      top: 50%
      bottom: auto
      margin:
        top: -19px
        left: 16px
      left: 100%
      right: auto

    &:before
      transform: rotate(90deg)
      top: 50%
      margin-top: -6px
      margin-left: 4px
      bottom: auto
      left: 100%
      right: auto

  &[data-ks-tooltip-color="red"]
    +pseudo-tooltip-color(map-get($colors, red))

  &[data-ks-tooltip-color="orange"]
    +pseudo-tooltip-color(map-get($colors, orange))

  &[data-ks-tooltip-color="yellow"]
    +pseudo-tooltip-color(map-get($colors, yellow))

  &[data-ks-tooltip-color="green"]
    +pseudo-tooltip-color(map-get($colors, green))

  &[data-ks-tooltip-color="blue"]
    +pseudo-tooltip-color(map-get($colors, blue))

  &[data-ks-tooltip-color="violet"]
    +pseudo-tooltip-color(map-get($colors, violet))

.tooltip
  +tooltip_base
  transform: translateY(8px)
  z-index: 10
  +label(map-get($colors, blue))
  margin: 10px auto
  left: 25%
  border-top-color: map-get($colors, blue)

  &:after
    +tooltip_arrow
    top: 100%
    left: 0
    margin-left: 8px
    border-top-color: inherit

  &.tooltip-bottom
    top: 100%
    bottom: auto

    &:after
      bottom: 100%
      top: auto
      transform: rotate(180deg)

  &.tooltip-left,
  &.tooltip-right
    top: 50%
    margin: 0
      top: -18px
    bottom: auto

  &.tooltip-left
    right: 100%
    left: auto
    margin:
      left: -8px

    &:after
      transform: rotate(-90deg)
      left: 100%
      margin-left: -8px
      top: 5px

  &.tooltip-right
    left: 100%
    right: auto

    &:after
      transform: rotate(90deg)
      left: auto
      right: 100%
      margin:
        left: 0
        right: -8px
      top: 5px

  &.tooltip-red
    background-color: map-get($colors, red)
    border-top-color: map-get($colors, red)

  &.tooltip-orange
    background-color: map-get($colors, orange)
    border-top-color: map-get($colors, orange)

  &.tooltip-yellow
    background-color: map-get($colors, yellow)
    border-top-color: map-get($colors, yellow)
    color: $default-font-color

  &.tooltip-green
    background-color: map-get($colors, green)
    border-top-color: map-get($colors, green)

  &.tooltip-blue
    background-color: map-get($colors, blue)
    border-top-color: map-get($colors, blue)

  &.tooltip-violet
    background-color: map-get($colors, violet)
    border-top-color: map-get($colors, violet)

  &.tooltip-primary
    background-color: $primary-color
    border-top-color: $primary-color

  &.tooltip-secondary
    background-color: $secondary-color
    border-top-color: $secondary-color