$font-stack: 'Roboto', sans-serif
$body-color: #f4f4f4
$primary-color: #03a9f4
$drawer-width: 300px
$actionbar-height: 60px
$actionbar-shadow: #999
$divider-color: #cecece
$drawer-item-height: 58px
$drawer-item-font-size: 18px
$card-padding: 20px

=border-radius($radius)
    -webkit-border-radius: $radius
    -moz-border-radius: $radius
    -ms-border-radius: $radius
    border-radius: $radius

=box-shadow($horizontal, $vertical, $blur, $spread, $color)
    -webkit-box-shadow: $horizontal $vertical $blur $spread $color
    -moz-box-shadow: $horizontal $vertical $blur $spread $color
    -ms-box-shadow: $horizontal $vertical $blur $spread $color
    box-shadow: $horizontal $vertical $blur $spread $color

=hyphens($value)
    -moz-hyphens: $value
    -ms-hyphens: $value
    -webkit-hyphens: $value
    hyphens: $value

body
    font-family: $font-stack
    background: $body-color
    margin: 0px

.actionbar
    width: 100%
    height: $actionbar-height
    position: fixed
    background: $primary-color
    top: 0px
    left: 0px
    padding-left: $drawer-width + 20
    color: #fff
    font-size: 25px
    line-height: $actionbar-height
    +box-shadow(0px,4px,4px,0px,$actionbar-shadow)

.menuicon
    height: 30px
    position: fixed
    top: 0px
    left: 0px
    padding: 15px
    cursor: pointer

.drawer
    width: $drawer-width
    top: 0px
    left: 0px
    position: absolute
    height: 100%
    background: #fff
    border-right-width: 1px
    border-right-color: $divider-color
    border-right-style: solid
    z-index: 50
    font-weight: 500

.drawerimg
    width: 100%

.draweritem
    height: $drawer-item-height
    line-height: $drawer-item-height
    font-size: $drawer-item-font-size
    padding-left: 16px
    cursor: pointer

.draweritembottom
    @extend .draweritem
    bottom: 0px
    position: absolute
    width: calc(100% - 16px)

.drawerdivider
    border-top-color: $divider-color
    border-top-width: 1px
    border-top-style: solid

.drawerdividerbottom
    @extend .drawerdivider
    bottom: 60px
    position: absolute
    width: 100%

.main
    width: calc(100% - 300px)
    height: calc(100%-60px)
    margin-left: $drawer-width
    margin-top: $actionbar-height

.card
    width: calc(50% - 36px)
    background: #fff
    +border-radius(1px)
    +box-shadow(0px,0px,2px,2px,$divider-color)
    display: inline-block
    margin: 16px
    float: left
    height: auto

.input
    width: 100%
    resize: none
    border: 0px
    height: auto
    min-height: 100px
    font-family: $font-stack
    font-size: 16px
    padding: $card-padding
    clear: both

.carddivider
    @extend .drawerdivider
    width: 100%

.cardtext
    padding: $card-padding

.cardbuttons
    float: right
    padding: $card-padding

.cardbutton
    min-width: 64px
    margin-left: 8px
    padding: 5px
    color: $primary-color
    cursor: pointer

.overlay
    background: #000
    opacity: 0
    position: fixed
    top: 0px
    left: 0px
    width: 100%
    height: 100%
    z-index: 30

#output
    +hyphens(auto)
    word-wrap: break-word


#outputcard
    display: none

#writtenmorse
    color: $primary-color

.version
    font-style: italic
    font-size: 20px

@media screen and (max-width: 1400px)
    .drawer
        display: none
        border-right-width: 0px
    .actionbar
        padding-left: 60px
    .main
        width: 100%
        margin-left: 0px

@media screen and (max-width: 750px)
    .card
        width: calc(100% - 36px)