@import '../../../styles/variables.sass'

@mixin text-based-input
  background: $aenima-input-background-color
  border: none
  border-radius: $aenima-border-radius
  color: $aenima-input-color
  padding: $aenima-input-padding

.control-panel-view
  background: $aenima-background-color
  color: $aenima-external-label-color
  overflow: hidden
  width: 360px
  z-index: 20

  h1
    font-size: 1.8em
    font-weight: lighter
    margin-top: 0
    text-align: center

  p
    line-height: 1.4em

    &:first-child
      margin-top: 0

    &:last-child
      margin-bottom: 0

  ul
    margin: 0
    padding: 0

  button

    &.glyphicon
      top: .2em

  label

    &.invalid

      input
        background: $aenima-invalid-input-background
        color: $aenima-invalid-input-color

    &[data-label-text]

      &.invalid

        &:after
          color: $aenima-invalid-input-color
          content: attr(data-label-text)
          display: block
          padding-top: 0.5em

  input

    &[type="text"],
    &[type="email"],
    &[type="password"],
    &[type="number"]
      +text-based-input

    &[type="number"]
      width: 3.5em

  textarea
    +text-based-input
    font-family: Monaco, monospace
    height: 12em
    resize: vertical
    width: $aenima-input-full-width

  select
    background: $aenima-input-background-color
    border: solid 1px $aenima-input-background-color
    color: $aenima-input-color
    font-size: 1.2em
    margin-left: $aenima-input-margin-left

    // Subtract 2em to account for extra <select> aenima.
    width: $aenima-input-mid-width - 2em

  hr
    border-color: $aenima-input-background-color
    margin-bottom: 1em
    width: 100%

  .error
    color: #f00

  .btn-hidden-label-wrapper

    span
      color: $aenima-bordered-icon-color
      left: $aenima-hidden-label-animated-nudge-offset
      opacity: 0
      position: relative
      transition: all $aenima-label-hide-show-duration

    &:hover span
      left: 0
      opacity: 1

  .row

    span
      display: block
      padding-bottom: 0.8em

      &:after
        content: ':'

    input.mid
      width: $aenima-input-mid-width

    input.wide
      width: $aenima-input-full-width

    &.checkbox-wrapper
      font-size: 1.2em

      span
        display: inline

        &:after
          content: ''

  .tabs-container,
  .tabs-content-container
    list-style-type: none

  .tabs-container
    background: $aenima-frame-background-color
    overflow: auto

    .tab
      border-radius: $aenima-border-radius $aenima-border-radius 0 0
      float: left
      margin: 0 4px

      a:link, a:active, a:hover, a:visited
        color: $aenima-external-label-color
        display: block

        // Necessary to prevent icons from breaking tab layout.
        height: 1.2em

        font-weight: bold
        padding: $aenima-tab-padding
        text-decoration: none

      .glyphicon
        // Nudge this up a pixel to make it look correct in most browsers.
        top: -1px

    .tab-show
      background: $aenima-background-color
      border: solid $aenima-tab-border-width $aenima-border-color
      border-bottom-color: $aenima-background-color

      a:link, a:active, a:hover, a:visited
        padding: $aenima-tab-padding - $aenima-tab-border-width

  .tab-content
    padding: $aenima-input-spacing

    a
      &:active,
      &:hover,
      &:link,
      &:visited
        color: $aenima-link-color
        font-weight: bold
        text-decoration: none

      &:hover
        text-decoration: underline

    > .row:last-child
      padding-bottom: 0