@import 'variables.sass'
@import 'compass/css3/transform'
@import 'compass/css3/images'

@mixin range-track
  background: none
  border-radius: $aenima-slide-thumb-size
  border: solid 1px $aenima-range-slide-color

@mixin range-thumb
  background: $aenima-range-slide-color
  border: none
  border-radius: $aenima-slide-thumb-size
  height: $aenima-slide-thumb-size
  width: $aenima-slide-thumb-size

@mixin bordered-icon-background($inner-color, $outer-color)
  +background-image(radial-gradient(50% 50%, $inner-color, $outer-color))

  &:active
    +background-image(radial-gradient(50% 50%, $outer-color, $inner-color))

.aenima
  font-family: Helvetica, Arial, serif
  font-size: 13px
  overflow: hidden
  opacity: 1
  transition-duration: $aenima-load-fade-in-duration
  transition-property: opacity, transform, -webkit-transform, -moz-transform, -ms-transform

  label
    cursor: pointer

  input
    &[type=range]
      background: none
      border: none
      border-radius: 1em
      cursor: ew-resize
      width: 100%
      -moz-appearance: none
      -webkit-appearance: none

    &[type=range]::-webkit-slider-runnable-track
      +range-track
      -webkit-appearance: none

    &[type=range]::-webkit-slider-thumb
      +range-thumb
      -webkit-appearance: none

    &[type=range]::-moz-range-track
      +range-track
      height: 1em
      -moz-appearance: none

    &[type=range]::-moz-range-thumb
      +range-thumb
      -moz-appearance: none

      &:checked
        transform: rotate(0deg)

  button
    background: $aenima-button-background
    border-radius: $aenima-border-radius
    border: solid 1px $aenima-button-border-color
    color: $aenima-external-label-color
    padding-top: 3px

    &.wide
      display: block
      font-size: 1.2em
      margin: 0.5em auto
      width: 75%

      &.small
        font-size: 1em

    &:active
      background: $aenima-background-color

    &.glyphicon
      background: none
      border: none
      color: $aenima-bordered-icon-color
      font-size: 1.2em
      padding: 5px 12px
      position: relative

    &.center
      display: block
      margin: 0 auto

  label[title]
    cursor: help

  &,
  .fill
    bottom: 0
    left: 0
    position: absolute
    right: 0
    top: 0

  .hide
    display: none

  .row
    display: block
    padding-bottom: $aenima-input-spacing
    position: relative

  .scrollable

    &::-webkit-scrollbar
      width: 10px

    &::-webkit-scrollbar-thumb
      background: $aenima-scrollbar-color
      border-radius: 10px

    &::-webkit-scrollbar-track
      border: solid 1px $aenima-scrollbar-color
      border-radius: 10px

  .flex-image-wrapper

    img
      width: 100%

  .transparent
    opacity: 0
    pointer-events: none

  .fadable
    transition-duration: $aenima-fadable-duration
    transition-property: opacity

  $button-line-height: $aenima-bordered-icon-button-dimensions - ($aenima-bordered-icon-button-border-width * 2)
  button.bordered-icon
    align-items: center
    border-radius: 50%
    border: solid $aenima-bordered-icon-button-border-width $aenima-bordered-icon-button-color
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.27), 0 0.1em 0 rgba(0,0,0,0.04), 0 0 12px rgba(0,0,0,0.21)
    color: $aenima-bordered-icon-button-color
    cursor: pointer
    display: flex
    font-size: $aenima-bordered-icon-button-dimensions
    height: $aenima-bordered-icon-button-dimensions
    justify-content: center
    line-height: $button-line-height
    margin-left: 1em
    margin-top: -2px
    padding: 0
    text-align: center
    text-shadow: 0 1px 1px $aenima-bordered-icon-button-text-shadow
    width: $aenima-bordered-icon-button-dimensions

    .safari &
      line-height: $button-line-height - .1em

    i
      top: 0