@import "variables.styl"

lr-rtc
  display block
  clear both
  margin-top 0em

div.call
  position relative
  transition all 0.1s
  padding-left 0vw
  padding-right 0vw
  padding-top 0vh
  padding-bottom 0vh
  color white

  &.active
    background-color lighten($greenBright, 10%)

  .button.callin
    background-color $greenBright
    border-radius 3vh
    padding 0.5em

  .button.hangup
    background-color $red

  .intro
    align-self center

  .video
    position relative
    a.fullscreen
      position absolute
      right 0
      top 0
      color white
      text-shadow 0 0 1px black
    p
      position absolute
      top 1em
      right 1em

  video
    max-width $ONE
    background-color darken($blueDark, 10%)

  &.active
    width $ONE
    position fixed
    left 0
    top calc(3em + 1vh)
    height calc(99vh - 3em)
    background-color $blueDark
    margin 0
    padding 0

    video.focused
      width 100%
      height auto
      max-height 20vh
    #localVideo
      max-width 10vw
      max-height 10vh
      width auto
      height auto
      transform: rotateY(180deg)

    .footer
      width 100%
      height 10vh
      a
        color white
        text-shadow 0 0 1px black
      .fg-pad
        flex-grow 30
      > div
        flex-grow 1
        min-width 2em
        text-align center
        align-self center

        &.controls
          background-color rgba(0,0,0,0.5)
          border-radius 1em
          > div
            flex-grow 1
            min-width 2em
            text-align center
            align-self center
            padding 0.5em 0.5em
          .button
            line-height: 1.6em;
            border-radius 0.5em
            padding 0.25em 0.75em

      .time
        width 3em
        .delimiter
          text-align center
          min-width 0.5em
        .seconds, .minutes, .hours, .days
          display inline-block
          min-width 1.2em
          text-align right

  &.fullscreen
    width 100vw
    height 100vh
    left 0
    top 0
    video.focused
      max-width 100vw
      max-height 100vh
      width 100%
      height auto
    #localVideo
      position fixed
      bottom 0
      left 0
      height 5vh
      width auto
      transition all 500ms
    #localVideo:focus
      height 25vh
      max-width 25vw

    .footer
      position fixed
      height 5vh
      bottom 0
      left 0


lr-rtc
  display block