/*
 Polymer includes a shim for CSS Custom Properties that we can use for application theming.
 Below, you'll find the default palette for the Polymer Starter Kit layout. Feel free to play
 with changing the colors used or generate your own palette of colours at MaterialPalette.com.

 See https//www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling-details
 for further information on custom CSS properties.
 */

/* Application theme */

:root
    --primary-text-color var(--paper-grey-900)
    --primary-background-color #ffffff
    --secondary-text-color #737373
    --disabled-text-color #9b9b9b
    --divider-color #dbdbdb
    --primary-color var(--paper-indigo-500)
    --light-primary-color var(--paper-indigo-100)
    --dark-primary-color var(--paper-indigo-700)
    --accent-color var(--paper-pink-a200)
    --light-accent-color var(--paper-pink-a100)
    --dark-accent-color var(--paper-pink-a400)

    /* Components */

    /* paper-drawer-panel */
    --drawer-menu-color #ffffff
    --drawer-border-color 1px solid #ccc
    --drawer-toolbar-border-color 1px solid rgba(0, 0, 0, 0.22)

    /* paper-menu */
    --paper-menu-background-color #fff
    --menu-link-color #111111

/* General styles */

#drawerToolbar
    color var(--secondary-text-color)
    background-color var(--drawer-menu-color)
    border-bottom var(--drawer-toolbar-border-color)

paper-scroll-header-panel
    height 100%

paper-menu
    --paper-menu-selected-item
        color var(--primary-color)

    --paper-menu-focused-item-after
        background var(--primary-color)

    a
        -webkit-font-smoothing antialiased
        color var(--menu-link-color)
        font-family 'Roboto', 'Noto', sans-serif
        font-size 14px
        font-weight 400
        line-height 24px
        min-height 48px
        padding 0 16px
        text-decoration none
        text-rendering optimizeLegibility

    iron-icon
        margin-right 33px
        opacity 0.54

#mainToolbar.tall
    .app-name
        -webkit-transform-origin left center
        /* Required for main area's paper-scroll-header-panel custom condensing transformation */
        font-size 40px
        font-weight 300
        transform-origin left center


#mainToolbar
    &:not(.tall)
        .middle-container
            font-size 18px
            padding-bottom 0

    .middle-container
        height 100%
        margin-left 48px

    .bottom-container
        -webkit-transform-origin left center
        /* Required for main area's paper-scroll-header-panel custom condensing transformation */
        margin-left 48px
        transform-origin left center

/* Height of the scroll area */
.content
    height 900px

paper-material
    background white
    border-radius 2px
    height 100%
    margin 16px auto
    padding 16px 0 16px 0
    width calc(98.66% - 16px)

#toast
    .toast-hide-button
        color #eeff41
        margin 10px

section[tabindex="-1"]focus
    outline none

/* Breakpoints */

/* Small */
@media (max-width 600px)
    #drawer
        .paper-toolbar
            margin-left 16px

    #mainToolbar
        &.tall
            .app-name
                font-size 24px
                font-weight 400

    paper-material
        --menu-container-display none
        padding-left 16px
        padding-right 16px
        width calc(97.33% - 32px)

/* Tablet+ */
@media (min-width 601px)
    #drawer.paper-drawer-panel > [drawer]
        border-right 1px solid rgba(0, 0, 0, 0.14)

    iron-pages
        padding 48px 62px

    paper-material
        margin-bottom 32px
        padding-left 30px
        padding-right 30px
        width calc(98% - 46px)