@import '../bootstrap'
@import '../theme'

/*Theme*/
v-toolbar($material)
    background-color: $material.app-bar
    color: $material.text.primary

v-toolbar-content($direction)
    margin-{$direction}: 0

    &.v-btn--icon
        margin-{$direction}: -6px

    &.v-menu .v-menu__activator, &.v-tooltip span
        .v-btn
            margin-{$direction}: 0

        .v-btn--icon
            margin-{$direction}: -6px

theme(v-toolbar, 'v-toolbar')

.v-toolbar
    bootable()
    elevation(4)
    position: relative
    width: 100%
    will-change: padding-left, padding-right

    //TODO: Do we even need this?
    .v-text-field--enclosed, .v-text-field--box
        margin: 0

        .v-text-field__details
            display: none

/** Children*/
.v-toolbar
    .v-tabs
        width: 100%

    &__title
        font-size: $headings.h6.size
        font-weight: $headings.h6.weight
        letter-spacing: $headings.h6.letter-spacing
        white-space: nowrap
        overflow: hidden
        text-overflow: ellipsis

        &:not(:first-child)
            margin-left: 20px

    &__content, &__extension
        align-items: center
        display: flex
        padding: 0 $grid-gutters.xl

        /*
        OVERRIDE
        =========================================
        @media $display-breakpoints.sm-and-down
          padding: 0 $grid-gutters.lg
        =========================================
        */
        +Override(sm-and-down)
            padding: 0 $grid-gutters.lg

        .v-btn--icon
            margin: 6px

        > *:first-child
            v-toolbar-content(left)

        > *:last-child
            v-toolbar-content(right)

        > .v-list
            flex: 1 1 auto
            max-height: 100%

        > .v-list:first-child
            margin-left: '-%s' % $grid-gutters.xl

            /*
            OVERRIDE
            =========================================
            @media $display-breakpoints.sm-and-down
            padding: 0 $grid-gutters.lg
            =========================================
            */
            +Override(sm-and-down)
                margin-left: '-%s' % $grid-gutters.lg

        > .v-list:last-child
            margin-right: '-%s' % $grid-gutters.xl

            /*
            OVERRIDE
            =========================================
            @media $display-breakpoints.sm-and-down
            padding: 0 $grid-gutters.lg
            =========================================
            */
            +Override(sm-and-down)
                margin-right: '-%s' % $grid-gutters.lg

    &__extension
        > .v-toolbar__title
            margin-left: 72px

    &__items
        display: flex
        height: inherit
        max-width: 100%
        padding: 0

        .v-btn
            align-items: center
            align-self: center

        .v-tooltip, .v-tooltip > span
            height: inherit

        .v-btn:not(.v-btn--floating):not(.v-btn--icon), .v-menu, .v-menu__activator
            height: inherit
            margin: 0

/** Types*/
.v-toolbar
    .v-overflow-btn, .v-btn-toggle
        elevation(0)

    .v-input
        margin: 0

    .v-overflow-btn
        .v-input__control, .v-input__slot
            &:before
                display: none

    &--card
        border-radius: $card-border-radius $card-border-radius 0 0
        elevation(0)

    &--fixed
        position: fixed
        z-index: 2

    &--fixed, &--absolute
        top: 0
        left: 0

    &--absolute
        position: absolute
        z-index: 2

    &--floating
        display: inline-flex
        margin: $grid-gutters.lg
        width: auto

    &--clipped
        z-index: 3