@import '../bootstrap'

.v-alert
    border-radius: $alert-border-radius
    border-width: $alert-border-width
    border-style: solid
    color: #fff
    display: flex
    font-size: $alert-font-size
    margin: $alert-margin
    padding: $alert-padding
    position: relative
    transition: $primary-transition

    .v-alert__icon.v-icon, &__dismissible .v-icon
        align-self: center
        color: $alert-icon-color
        font-size: $alert-icon-font-size

    &--outline .v-icon
        color: inherit !important

    &__icon
        margin-right: $alert-padding

    &__dismissible
        align-self: flex-start
        color: inherit
        margin-left: $alert-padding
        margin-right: 0
        text-decoration: none
        transition: $primary-transition
        user-select: none

        &:hover
            opacity: 0.8

    &--no-icon
        .v-alert__icon
            display: none

    > div
        align-self: center
        flex: 1 1
    
    /* 
    // OVERRIDE
    // ================================================
    @media screen and (max-width: $grid-breakpoints.sm)
        &__icon
            display: none
    // ================================================
     */

    &__icon
        +Override(xs-only)
            display: none
//Double .v-alert is intended - it increases css specificity
//to properly set the border color where alert has set color
//with modifier (for example "red lighten-2")
.v-alert.v-alert
    border-color: $material-light.dividers !important

    &--outline
        border: $alert-outline-border-width $alert-outline-border-style currentColor !important