@import 'sass/bourbon/bourbon'

// Mixin for icons using CSS background.
@mixin icon-bg($url, $position, $size)
  background-repeat: no-repeat
  background-size: $size
  background-image: url($url)

@mixin lab-button
  @include linear-gradient(#fafafa, #c2c2c2, $fallback: #eee)
  font-family: inherit
  border: 1px solid #ccc
  border-radius: 0.7em
  color: #333
  padding-left: 1em
  padding-right: 1em
  text-align: center
  text-shadow: 0 1px 0 #eee
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3)
  position: relative

  &:hover:not(.lab-disabled)
    @include linear-gradient(#fff, #e6e6e6, $fallback: #e6e6e6)
    cursor: pointer

  &:active
    @include linear-gradient(#e6e6e6, #fff, $fallback: #fff)
    border: 1px solid #aaa
    border-bottom: 1px solid #888

.lab-disabled
  opacity: 0.7
.lab-disabled-overlay
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  z-index: 100

// Typography for various interactive components which support markdown. For
// now it's used in text components and about dialog.
// Define all rules with !important to ensure that they won't be overwritten
// accidentally by other styles (it can be also difficult to test it, as this
// content is user-generated mostly).
.markdown-typography
  *
    margin: 0.2em 0 !important
  img
    margin: 0 !important
  h1, h2, h3, h4, h5, h6
    color: #444 !important
    font-weight: bold !important
  h1
    font-size: 1.3em !important
  h2
    font-size: 1.2em !important
  h3
    font-size: 1.1em !important
  h4
    font-size: 1.0em !important
  h5
    font-size: 0.95em !important
  h6
    font-size: 0.90em !important

.component
  position: relative // to position .lab-disabled-overlay correctly
  display: inline-block
  vertical-align: middle
  // Important! Layout algorithm sometimes uses 'nowrap' value for containers
  // to prevent unwanted component wrapping. Ensure that inside component,
  // the default value is used.
  white-space: normal
  margin: 0
  padding: 0
  @include user-select(none)
  -webkit-tap-highlight-color: rgba(0,0,0,0)

  &.clickable
    cursor: pointer

.interactive-button
  height: 2em
  width: auto
  & > button
    @include lab-button
    white-space: nowrap
    width: 100%
    height: 100%
    line-height: 1.8em
    font-size: 1em

.interactive-text
  &.clickable
    color: #048

.interactive-radio
  font-size: 1em
  .option
    display: inline-block
    &:hover:not(.lab-disabled)
      cursor: pointer
      label
        cursor: pointer
  &.horizontal
    // Horizontal alignment of options.
    .option + .option
      // Add margin only *between* option.
      margin-left: 1em
  &.vertical
    // Vertical alignment of options.
    .option
      display: block
  &.toggle
    .option
      @include lab-button
      line-height: 2em
      border-radius: 0
      &.checked, &:active:hover
        @include linear-gradient(#e6e6e6, #fff, $fallback: #fff)
      &.checked:hover
        @include linear-gradient(#efefef, #fff, $fallback: #fff)
  &.horizontal.toggle .options
    .option + .option
      margin-left: 0
      border-left: none
    .option:first-child
      border-top-left-radius: 0.7em
      border-bottom-left-radius: 0.7em
    .option:last-child
      border-top-right-radius: 0.7em
      border-bottom-right-radius: 0.7em
  &.vertical.toggle .options
    .option + .option
      border-top: none
    .option:first-child
      border-top-left-radius: 0.7em
      border-top-right-radius: 0.7em
    .option:last-child
      border-bottom-left-radius: 0.7em
      border-bottom-right-radius: 0.7em
  .label
    // Main label, for whole radio buttons group.
    vertical-align: middle
    &.on-left
      margin-right: 0.5em
    &.on-top
      display: block
  label
    // Labels for options.
    vertical-align: middle
  input[type="radio"]
    display: none
  .fakeCheckable
    // Custom div used for radio styling.
    display: inline-block
    vertical-align: middle
    margin: 0 0.4em 0 0
    padding: 0
    width: 1.1em
    height: 1.1em
    @include icon-bg("#{$directory}resources/upstatement/unchecked.svg", center, 100%)
  .checked .fakeCheckable
    @include icon-bg("#{$directory}resources/upstatement/checked.svg", center, 100%)


.interactive-pulldown
  font-size: 1em
  .label, .selectboxit-container
    // Align vertically select box and label.
    vertical-align: middle
  .label
    &.on-left
      margin-right: 0.5em
    &.on-top
      margin-bottom: 0.1em
      display: block

.interactive-checkbox
  font-size: 1em
  label
    vertical-align: middle
  .fakeCheckable
    // Custom div used for checkbox styling.
    // Colors and size match Upstatement proposal.
    position: relative
    display: inline-block
    vertical-align: middle
    width: 1em
    height: 1em
    margin: 0 0.4em 0 0
    padding: 0
    background: #E6E7E8
    border: 1px solid #D6D7D8
    &.right
      margin: 0 0 0 0.4em
    &:after
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
      filter: alpha(opacity=0)
      opacity: 0
      content: ''
      position: absolute
      width: 0.6em
      height: 0.3em
      background: transparent
      top: 0.1em
      left: 0.1em
      border: 0.21em solid rgb(97, 96, 96)
      border-top: none
      border-right: none

      -webkit-transform: rotate(-45deg)
      -moz-transform: rotate(-45deg)
      -o-transform: rotate(-45deg)
      -ms-transform: rotate(-45deg)
      transform: rotate(-45deg)
    &:hover:after
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"
      filter: alpha(opacity=20)
      opacity: 0.20
    &.checked:after
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
      filter: alpha(opacity=100)
      opacity: 1
    &:hover.checked:after
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"
      filter: alpha(opacity=75)
      opacity: 0.75

.interactive-table
  div.title
    text-align: center
    padding: 0.3em 0em
    color: black
  div.table-wrapper
    padding: 0.2em 0.8em 0.2em 0.4em
    background-color: #eee
    border-radius: 0.4em
    height: 100%
    width: auto
    overflow: hidden
    table
      border-collapse: collapse
      background-color: #eee
      width: 100%
      thead
        border-collapse: collapse
        border-bottom: 1px solid #888
        display: table-header-group
        width: 80%
        tr
          display: block
          position: relative
        th
          text-align: left
          background-repeat: no-repeat
          background-position: center right
          cursor: n-resize
          font-weight: normal
          font-size: 90%
          margin-bottom: 0.1em
          padding: 0.4em 0.5em 0.5em 0.2em
          border-radius: 0.1em
          min-width: 1em
        th.sorted
          background: darken(#eee, 10%)
        th.sorted.asc
          background-image: url("#{$directory}resources/down.png")
          background-size: 15%
          background-repeat: no-repeat
          background-position: bottom right
        th.sorted.desc
          background-image: url("#{$directory}resources/up.png")
          background-size: 15%
          background-repeat: no-repeat
          background-position: top right
          cursor: s-resize
        th:nth-child(even)
          background-color: darken(#eee, 6%)
      tbody
        border-collapse: collapse
        padding-bottom: 0.3em
        display: block
        overflow: auto
        width: 100%
        background-color: white
        vertical-align: middle
        tr
          display: table-row-group
          border-top: 1px solid #888
          &:nth-child(odd)
            background-color: #f8f8f8
            td:nth-child(even)
              background-color: darken(#f8f8f8, 6%)
          &:nth-child(even)
            background-color: #fff
            td:nth-child(even)
              background-color: darken(#fff, 6%)
          &:first-child
            border-top: none
          td
            font-size: 80%
            font-weight: normal
            text-align: left
            padding: 0.2em 0.3em 0.2em 0.3em
        tr.selected
          background-color: #fff4b8
          td:nth-child(even)
            background-color: darken(#fff4b8, 6%)
      .editor-text
        width: 100%
        height: 100%
        border: 0
        margin: 0
        background: white
        outline: 0
        padding: 0

.numeric-output
  padding: 0.3em 0.2em 0.3em 0.7em
  span.output
    white-space: nowrap
    background-color: white
    border-radius: 0.4em
    padding: 0.15em 0 0.15em 0
  span.label
    display: inline-block
    padding-right: 0.5em
  span.value
    display: inline-block
    padding: 0.0em 0.2em 0.0em 0.5em
    min-width: 3em
    text-align: right
    font-weight: 600
  span.units
    display: inline-block
    padding-left: 0.2em
    padding-right: 0.5em
    font-style: italic
  &.horizontal
    span.label
      display: inline-block
  &.vertical
    vertical-align: top
    span.label
      padding-bottom: 0.2em
      display: block

.interactive-slider
  // Leave some space for long labels.
  padding: 0 0.7em
  // Style jQuery UI classes.
  .ui-slider
    // make inner line not as wide as container
    width: 94%
    height: 0
    left: 3%
    top: 0.5em
    border-color: #999
    &.has-fill
      border: none
  .ui-slider-handle
    text-decoration: none
    top: -1em
    // This is default height of slider handle, when slider height is set to "auto".
    // Otherwise, it will be overwritten by dynamically calculated value.
    height: 1.75em
    font-size: 0.8em
    font-weight: normal
    text-align: center
    width: auto
    // make it a circle
    min-width: 2em
    min-height: 2em
    // center circle over left edge
    margin-left: -1em
    border-radius: 4em
    padding: 0.35em 0.5em 0em 0.5em
    // make more 3d
    @include linear-gradient(#fafafa, #c2c2c2, $fallback: #eee)
    border-bottom-color: #bbb
    box-shadow: 0px 2px 3px rgba(0,0,0,0.3)
    &:hover
      color: #333
      border-color: #D3D3D3
      @include linear-gradient(#fff, #e6e6e6, $fallback: #e6e6e6)
    &:focus
      outline: $focus-outline-color solid 0.2em
  .title
    display: inline-block
    font-size: 1em
    white-space: nowrap
    vertical-align: top
    &.top
      margin: 0 0 0.3em 0
    &.bottom
      margin: 0.3em 0 0 0
    &.left
      margin: 0 0.3em 0 0
    &.right
      margin: 0 0 0 0.3em
  .container
    // This is default height of slider, when its height is set to "auto".
    // Otherwise, it will be overwritten by dynamically calculated value.
    height: 1.1em
    // make this a positioned element so the .label can be positioned absolute
    position: relative
    // bottom margin has to account for size of labels, which are taken out of flow
    margin-bottom: 1em
    // follow width of the most outer container
    width: 100%
    background-color: rgba(0, 0, 0, 0.085)
    border-radius: 0.4em
    .label
      position: absolute
      display: inline-block
      top: 100%
      // "width: 2x; margin-left: -x; left: y%" places the center of the .label at exactly y%
      // of the width of the parent
      width: 6em
      margin: 0.2em 0 0 -3em
      // Now, make the text itself centered in the .label element
      text-align: center
      // And finally, make the position labels a bit smaller than the title and other text
      font-size: 0.8em
      &.side
        width: auto
        white-space: nowrap
        margin: 0
        top: 0

.interactive-joystick
  .title
    width: 100%
    text-align: left
  .container
    position: relative
  .base
    position: absolute
    background-color: lightgray
    padding: 0px
    -moz-box-shadow:    inset 2px 2px 3px #888888
    -webkit-box-shadow: inset 2px 2px 3px #888888
    box-shadow:         inset 2px 2px 3px #888888

    .handle
      position: relative
      background-color: red
      margin: 0px
      padding: 0px
      -moz-box-shadow:    3px 3px 3px #888888
      -webkit-box-shadow: 3px 3px 3px #888888
      box-shadow:         3px 3px 3px #888888
      cursor: pointer
  .label
    position: absolute
    &.e
      top: 50%
      margin-top: -0.5em
    &.w
      top: 50%
      margin-top: -0.5em
    &.s
      bottom: 0
      left: 0
    &.n
      top: 0
      left: 0
  .value
    position: relative
    text-align: center

.interactive-color-indicator
  .swatch
    height: 1.5em
    width: 2.5em
    border: 1px solid black

.textBoxBody
  font-family: inherit
  background-color: rgba(0, 0, 0, 0)
  padding: 0.5em
  p
    font-size: 2em
    margin: 0.5em 0 0 0.5em
    line-height: 1.3em

.interactive-spectrometer
  background: #fff
  overflow: hidden

  .spectrometer-bg
    position: absolute
    height: 100%

  .photon-mark
    position: absolute
    background-color: black
    width: 1px
    height: 100%

  .tick-mark
    position: absolute
    background-color: #555
    width: 2px
    height: 0.5em
    bottom: 0

.interactive-thermometer
  // Important! Prevents labels container from wrapping to next line.
  white-space: nowrap
  .label
    // Main label under the thermometer.
    margin: 0
    text-align: center
    font-size: 1em
  .value-label
    // Label on the right side, used to describe ticks.
    position: absolute
    white-space: nowrap
    margin-bottom: -0.75em
  .labels-container
    position: relative
  .thermometer-main-container, .labels-container
    display: inline-block
    vertical-align: top
  .thermometer
    display: block
    margin: auto
    border: 2px solid #f4b626
    position: relative
    border-radius: 1.5em 1.5em 0.2em 0.2em
    background: white
    div
      display: block
      position: relative
      margin: 0px
      padding: 0px
    .thermometer-fill
      position: absolute
      width: 70%
      left: 15%
      bottom: 0
      background: #e16a3e
      border-radius: 0.75em 0.75em 0em 0em

#interactive-playback-container
  text-align: center

  .duration-control
    position: absolute
    font-size: 0.9em
    left: 0

.interactive-playback
  height: 2em
  white-space: nowrap
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)

  &.text > button
    @include lab-button
    height: 80%
    width: 6em
    font-size: 0.8em
    line-height: 1.6em
    margin: 0.5em 0.8em
    padding-right: 0.5em
    padding-left: 0.5em

    &.disabled
      @include linear-gradient(#fff, #e6e6e6, $fallback: #e6e6e6)

  &.text.wide > button
    width: 7em

  &.text.scrunched-buttons > button
    margin-left: 0.25em
    margin-right: 0.25em

  &.video
    border-bottom-left-radius: 0.7em
    border-bottom-right-radius: 0.7em
    box-shadow: 0px 1px 1px rgba(0,0,0,0.4)

  &.video > button
    @include appearance(none)
    display: inline-block
    vertical-align: middle
    font-family: inherit
    font-size: 1em
    height: 100%
    padding: 0.35em 0 0 0
    width: 2.7em
    margin: 0
    text-align: center
    border: none
    @include linear-gradient(#fbfbfb, #BCBEC0, $fallback: #eee)

    &:hover
      @include linear-gradient(#fff, #e6e6e6, $fallback: #e6e6e6)
      cursor: pointer

    &:active
      @include linear-gradient(#e6e6e6, #fff, $fallback: #f4f4f4)

    &:focus
      outline: none

  .hidden
    display: none !important
  .first
    border-bottom-left-radius: 0.7em
  .last
    border-bottom-right-radius: 0.7em

  .play-pause
    min-width: 2.7em
    // Style play / pause button, choose appropriate icon.
    .icon-pause
      display: none
    &.playing
      .icon-pause
        display: inline-block
      .icon-play
        display: none

    &.disabled
      @include linear-gradient(#fff, #e6e6e6, $fallback: #e6e6e6)
      &:hover
        cursor: default
      .icon-pause
        opacity: 0.5
      .icon-play
        opacity: 0.5

    // Style clock display.
    .time-display
      font-size: 0.85em
      display: none
    &.with-clock
      position: relative
      width: 6.4em
      white-space: nowrap
      text-align: left
      i
        margin-left: 0.55em
      .time-display
        display: inline-block
        position: absolute
        right: 0.5em
        bottom: 0.17em
        vertical-align: middle
        width: 5em
        color: #939598
        background: #e6e7e8
        text-align: right
        border: 1px solid #bbb
        border-bottom-color: #ccc
        padding: 0.1em 0.2em 0 0
        margin-left: 0.4em
        border-radius: 0.5em

        canvas
          width: 4.5em
          height: 1.1em

  i
    // Icons.
    color: #939598
    font-size: 1em
    vertical-align: middle

  .spacer
    vertical-align: middle
    display: inline-block
    height: 100%
    width: 2px
    @include linear-gradient(#fefefe, #aaacaf, $fallback: #e6e6e6)

