////////////////////////////////////////////////////////////////////////////////
//
//  Licensed to the Apache Software Foundation (ASF) under one or more
//  contributor license agreements.  See the NOTICE file distributed with
//  this work for additional information regarding copyright ownership.
//  The ASF licenses this file to You under the Apache License, Version 2.0
//  (the "License"); you may not use this file except in compliance with
//  the License.  You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
//  Unless required by applicable law or agreed to in writing, software
//  distributed under the License is distributed on an "AS IS" BASIS,
//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//  See the License for the specific language governing permissions and
//  limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////

// Jewel Alert

// Alert variables
$alert-padding: 20px
$alert-min-width: 320px
$alert-min-height: 240px
$alert-header-height: 50px
$alert-footer-height: 84px
$alert-border-radius: 3px

$alert-title-font-size: 1.45em
$alert-title-font-weight: bold
$alert-title-color: $primary-color

$alert-label-font-size: 1.1em
$alert-label-font-weight: $font-weight-normal
$alert-label-color: $default-font-color

$alert-control-bar-align: 'left'

$alert-modal-opacity: .5

.jewel.alert
    // position: fixed

    // top: 50%
    // left: 50%
    transform: translate(-50%, -60%)
    
    margin: 0
    padding: 0
    
    //max-width: 100%
    //max-height: 100%

    min-width: $alert-min-width
    min-height: $alert-min-height
    
    border: 0px solid
    @if $dark
        background: lighten($background-color, 10%)
    @else
        background: lighten($background-color, 10%)
    box-shadow: 0px 20px 65px 0px rgba(0,0,0,0.8)
    border-radius: $alert-border-radius

    opacity: 0
    will-change: opacity, transform
    
    &.open
        opacity: 1
        transform: translate(-50%, -50%)
        transition: animation-standard(opacity, .4s), animation-standard(transform, .4s)

        + .backdrop
            opacity: 1
            transition: animation-standard(opacity, .4s)

    .jewel.titlebar
        padding: $alert-padding $alert-padding 0px $alert-padding
        height: $alert-header-height
        color: $alert-title-color
        
        .jewel.label
            font:
                size: $alert-title-font-size !important
                weight: $alert-title-font-weight
                color: $primary-color
          
    .content
        // position: absolute
        padding: $alert-padding
        top: $alert-header-height
        bottom: $alert-footer-height
        // width: 100%
        // overflow-y: auto

        .jewel.label
            white-space: normal
            color: $alert-label-color
            font:
                size: $alert-label-font-size
                weight: $alert-label-font-weight

    .jewel.controlbar
        @if $flat
            background: lighten($default-color, 15%)
            border: 0px solid
            box-shadow: none
        @else
            background: linear-gradient(lighten($default-color, 5%), darken($default-color, 5%))
            border-top: 1px solid darken($default-color, 15%)
            box-shadow: inset 0 1px 0 lighten($default-color, 20%)
        border-radius: 0px 0px $alert-border-radius $alert-border-radius

        padding: $alert-padding
        position: absolute
        bottom: 0
        width: 100%
        height: $alert-footer-height
        
    + .backdrop
        opacity: 0
        will-change: opacity
        background-color: rgba(0, 0, 0, $alert-modal-opacity)