/******************************************************************
 * @file        samwareuk.notifications.css
 * @path        components/samwareuk/notifications/v2.0.0/css
 * @version     2.0.0
 * @created_on  17 Mar 2020
 * @author      Scott Markham <scott.markham@samwareuk.co.uk>
 * @copyright   2020 SAMWare UK <https://www.samwareuk.co.uk>
 * @description CSS for Notification tools.
 ******************************************************************/
.sw-notification {
    position:               fixed;
    top:                    120px;
    left:                   10vw;
    right:                  10vw;
    min-width:              60vw;
    -moz-border-radius:     6px;
    -webkit-border-radius:  6px;
    border-radius:          6px;
    padding-top:            20px;
    padding-left:           20px;
    padding-right:          20px;
    padding-bottom:         20px;
    z-index:                99;
    background-color:       #3f3f3f;
    opacity:                0.95;
    color:                  white;
    box-shadow:             0px 0px 8px 2px rgba(0,0,0,0.4);
}

.sw-notification-controls {
    text-decoration:        none;
    position:               absolute;
    top:                    5px;
    right:                  5px;
}

.sw-notification-controls > button {
    width:                  32px;
    min-width:              32px;
    height:                 32px;
    min-height:             20px;
    margin:                 2px;
    border-radius:          50%;
    padding:                0px;
    font-size:              12pt;
}

.sw-notification-icon-background.sw-notification-icon-info,
.sw-notification-icon-background.sw-notification-icon-error,
.sw-notification-icon-background.sw-notification-icon-confirm {
    float:                  left;
    width:                  40px;
    height:                 40px;
    margin-top:             5px;
    margin-right:           8px;
    border-radius:          50%;
    font-size:              37.5pt;
    background-color:       white;
}

.sw-notification-icon-background.sw-notification-icon-warning {
    display:                none;
}

.sw-notification-icon-foreground {
    float:                  left;
    margin-right:           8px;
    font-size:              37.5pt;
}

.sw-notification-icon-foreground.sw-notification-icon-info,
.sw-notification-icon-foreground.sw-notification-icon-confirm {
    margin-left:            -49px;
    color:                  #3f7fff;
}

.sw-notification-icon-foreground.sw-notification-icon-warning {
    color:                  #e7e73f;
}

.sw-notification-icon-foreground.sw-notification-icon-error {
    margin-left:            -49px;
    color:                  #ef2f2f;
}

.sw-notification > h3 {
    margin-top:             6px;
    margin-bottom:          10px;
    font-size:              18pt;
    color:                  white;
}

.sw-notification > label {
    
}

.sw-notification > label a {
    color:                  skyblue;
}

@media (max-height: 340px) {
    .sw-notification {
        top:                100px;
    }
}

@media (min-height: 500px) {
    .sw-notification {
        top:                170px;
    }
}

@media (min-width: 480px) {
    .sw-notification {
        left:               20vw;
        right:              20vw;
        min-width:          50vw;
    }
}

@media (min-width: 1066px) {
    .sw-notification {
        left:               calc(50vw - 333px);
        right:              calc(50vw - 333px);
        min-width:          0;
        max-width:          600px;
    }
}