@import 'sass/bourbon/bourbon'

// This file contains modifications of the basic jQuery UI theme. There is
// ThemeRoller application available, but it doesn't provide some necessary
// features. Also our customization is pretty simple for now.

.ui-widget
  font-size: 1em
  font-family: inherit

.ui-widget-header
  font-size: 1em
  font-weight: bold
  color: #fff
  background: lighten(#3A878B, 15%)
  border: none
  opacity: 0.7
  border-radius: 0.5em 0.5em 0 0

.ui-dialog
  border: #fff
  border-radius: 0.5em
  box-shadow: 1px 1px 15px rgba(000,000,000,0.5)
  padding: 0
  &.no-close
    .ui-dialog-titlebar-close
      display: none

.ui-dialog-content
  color: #535455

// Modifications to base jQuery selectBoxIt theme
.selectboxit-container *
  font-size: 1em
  font-family: inherit

// These options are very important, they ensure that our
// select box is responsive (adjusts its size dynamically).
.selectboxit-text
  max-width: none !important
.selectboxit-options
  min-width: 100% !important
.selectboxit-option, .selectboxit-optgroup-header
  text-indent: 0.4em

.selectboxit-container
  .selectboxit, .selectboxit-options
    border-radius: 0.7em

.selectboxit-arrow-container
  width: 2.14em
  border-left: 1px solid #ccc

.selectboxit .selectboxit-arrow-container .selectboxit-arrow
  top: 39%

.selectboxit-default-arrow
  border-top: 0.45em solid rgb(140, 140, 140)
  border-right: 0.45em solid transparent
  border-left: 0.45em solid transparent

.selectboxit-container span, .selectboxit-container .selectboxit-options a
  height: 2em
  line-height: 2em

.selectboxit-text
  text-indent: 0.5em
  overflow: visible

.selectboxit-btn
  &, &:focus, &.selectboxit-enabled:focus
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3)
    background-color: #f6f6f6
    background-position: 0 0
    @include linear-gradient(#fafafa, #c2c2c2, $fallback: #eee)

  &:hover, &.selectboxit-enabled:hover, &:active,
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3)
    color: #333333
    background-color: #fff
    background-position: 0 0
    @include linear-gradient(#fff, #e6e6e6, $fallback: #e6e6e6)

// Tooltips
.ui-tooltip
  border: none
  @include linear-gradient(#fff, #e6e6e6, $fallback: #e6e6e6)
  padding: 0.05em 0.15em
  color: #333
  border-radius: 0.4em
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3)
  min-width: 2.5em
  max-width: 12em

.ui-tooltip-content
  font-size: 0.85em

.ui-tooltip-arrow
  &.top:after
    background: #fff
  &.bottom:after
    background: #e6e6e6

.ui-tooltip-arrow
  width: 0.6em
  height: 0.5em
  overflow: hidden
  position: absolute
  left: 50%
  margin-left: -0.3em
  bottom: -0.5em
  &.top
    top: -0.5em
    bottom: auto

.ui-tooltip-arrow:after
  content: ""
  position: absolute
  top: -0.5em
  width: 0.6em
  height: 0.6em
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3)
  -webkit-transform: rotate(45deg)
  -moz-transform: rotate(45deg)
  -ms-transform: rotate(45deg)
  -o-transform: rotate(45deg)
  transform: rotate(45deg)

.ui-tooltip-arrow.top:after
  bottom: -0.5em
  top: auto
