@import 'sass/bourbon/bourbon'
@import 'sass/neat/neat'

.lab-interactive-container
  @include fill-parent
  font-family: Lato, Verdana, Geneva, sans-serif
  font-size: 1em
  color: #3f3f3f
  height: 100%
  position: relative
  border-radius: 0.5em
  overflow: hidden
  &:focus
    outline: none
  border: 1px lightgrey solid
  // Old browsers
  background-color: lighten($interactive-container-background-gradient-destination, 5%)
  $experimental-support-for-svg: true
  @include background-image(radial-gradient(center, ellipse cover, $interactive-container-background 12%, $interactive-container-background-gradient-destination 100%))

.lab-fastclick-container
  @include fill-parent
  height: 100%
  position: relative

.inner-container
  width: 100%
  height: 100%

.component-spacing
  margin: 0.3em 0.5em

#top-bar
  background-color: white

#bottom-bar
  background-color: white

#credits-link
  padding: 0.2em 0 0.2em 0.8em

#about-link, #share-link
  color: gray
  &:hover
    color: black
  p
    margin: 0em
    padding: 0em

.fullscreen
  @include icon-bg("#{$directory}resources/layout/fullscreen.svg", center, 90%)
  &:hover
    @include icon-bg("#{$directory}resources/layout/fullscreen-dark.svg", center, 90%)

body:-moz-full-screen .fullscreen
  @include icon-bg("#{$directory}resources/layout/fullscreen-exit.svg", center, 90%)
  &:hover
    @include icon-bg("#{$directory}resources/layout/fullscreen-exit-dark.svg", center, 90%)
body:-webkit-full-screen .fullscreen
  @include icon-bg("#{$directory}resources/layout/fullscreen-exit.svg", center, 90%)
  &:hover
    @include icon-bg("#{$directory}resources/layout/fullscreen-exit-dark.svg", center, 90%)
body:fullscreen .fullscreen
  @include icon-bg("#{$directory}resources/layout/fullscreen-exit.svg", center, 90%)
  &:hover
    @include icon-bg("#{$directory}resources/layout/fullscreen-exit-dark.svg", center, 90%)

.credits
  background: url("#{$directory}resources/layout/cc-logo.svg") no-repeat
  background-size: 80%
  background-position: 0.3em 0.2em
  &:hover
    background-image: url("#{$directory}resources/layout/cc-logo-dark.svg")

#interactive-reload-icon > i
  color: #000
  opacity: 0.5
  &.active
    color: #fff
  &:hover
    opacity: 0.9
