bright-orange-color = #eb9369
orange-color        = #ea4b2a
green-color         = #00d814

@import 'keyframes/*'

// https://github.com/bfred-it/iphone-inline-video#usage
video::-webkit-media-controls-start-playback-button
  display none

.videomail

    .visuals
        position relative

        video.replay
            object-fit scale-down

    .replay
    .userMedia
        width  100% !important

    .countdown
    .recordTimer
    .recordNote
    .pausedHeader
    .pausedHint
        margin 0
        height auto

    .countdown
    .recordTimer
    .recordNote
    .paused
    noscript
        position absolute

    .countdown
    .recordTimer
    .recordNote
    .pausedHeader
    .pausedHint
    noscript
        font-weight bold

    .countdown
    .paused
    noscript
        width       100%
        top         50%
        transform   translateY(-50%)

    .pausedHeader
    .pausedHint
    .countdown
        text-align  center
        text-shadow 0px 0px 2px rgba(255, 255, 255, 1)

    .pausedHeader
    .countdown
        opacity   .85
        font-size 440%

    .pausedHint
        font-size 150%

    .recordTimer
    .recordNote
        right           .7em
        background      rgba(10, 10, 10, .8)
        padding         .4em .4em .3em
        transition      all 1s ease
        color           green-color
        font-family     monospace
        opacity         .9

        &.near
            color bright-orange-color

        &.nigh
            color orange-color

    .recordTimer
        top .7em

    .recordNote
        top 3.6em

        &:before
            content   "REC"
            animation blink 1s infinite

    .notifier
        overflow   hidden
        box-sizing border-box
        height     100%

    .radioGroup
        display block

    video
        margin-bottom 0