/*------------------------------------------------------------------------------
Notification style
@author Chuck Yeo
@version 1.0.1
@license Refer to [color-div].js

Reference: https://github.com/mickelsonmichael/js-snackbar
NOTE: This version has been heavily modified as compared with the original version.
------------------------------------------------------------------------------*/



/*------------------------------------------------------------------------------
Global CSS variables

The following are the CSS variables from main.css that are needed for this plugin
Uncomment the following when used in another project without the main.css
------------------------------------------------------------------------------*/
:root {
    /* Original copy for reference */
    /*
    --spacing-small: 13px;
    --border-radius-xtiny: 3px;

    --font-family-secondary: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-size-small: 18px;
    --font-weight-medium: 500;

    --system-success-color: #3dc663;
    --system-error-color: #ec3d3d;
    --system-warning-color: #f59514;
    --system-info-color: #2196f3;
    */
    /* Customise accordingly to your needs */
    --spacing-small: 13px;
    --border-radius-xtiny: 3px;

    --font-family-secondary: "Poppings", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-size-small: 16px;
    --font-weight-medium: 400;

    --system-success-color: #3dc663;
    --system-error-color: #ec3d3d;
    --system-warning-color: #f59514;
    --system-info-color: #2196f3;
}
/*----------------------------------------------------------------------------*/



/*#region Snackbar main container*/
/*------------------------------------------------------------------------------
Snackbar main container (for positioning)
------------------------------------------------------------------------------*/
.js-snackbar-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    /*position: absolute;*/ /* For notification that scrolls together with the page content */
    /*position: fixed;*/ /* For notification that is fixed and does not scrolls together with the page content - However, this is not aligned to the container but is aligned to the entire page */
    /*position: sticky;*/ /* For notification that is fixed but relative to its parent - Does not work */
    /* All the solution does not work as needed but fixed is the cloest solution so far */
    /* To fixed the position, set the options.fixed to true in the JavaScript instead of hard-cording the style to fixed here */
    position: absolute;
    bottom: 0;
    right: 0;

    overflow: hidden;
    max-width: 100%;
    z-index: 1099; /* MODIFIED (different from original): Updated (to provide a higer z-index). */
}

.js-snackbar-container--top-left {
    top: 0;
    bottom: unset;
    left: 0;
    right: unset;
}

.js-snackbar-container--top-center {
    top: 30px; /*!!! Temporary solution to make the notification go below the safe area in mobile devices */
    bottom: unset;
    left: 50%;
    right: unset;
    transform: translateX(-50%);
}

.js-snackbar-container--top-right {
    top: 0;
    bottom: unset;
    left: unset;
    right: 0;
}

.js-snackbar-container--bottom-left {
    top: unset;
    bottom: 0;
    left: 0;
    right: unset;
}

.js-snackbar-container--bottom-center {
    top: unset;
    bottom: 0;
    left: 50%;
    right: unset;
    transform: translateX(-50%);
}

.js-snackbar-container--fixed {
    position: fixed;
}

.js-snackbar-container * {
    box-sizing: border-box;
}
/*----------------------------------------------------------------------------*/
/*#endregion */



/*#region Snackbar layout containers*/
/*------------------------------------------------------------------------------
Snackbar layout containers
------------------------------------------------------------------------------*/
.js-snackbar__wrapper {
    --js-snackbar-wrapper-margin-top-bottom: var(--spacing-small);
    --js-snackbar-wrapper-margin-left-right: var(--spacing-small);
    --js-snackbar-wrapper-transition-duration: 0.3s;

    display: flex;
    min-width: auto;
    min-height: 50px;
    height: auto;
    overflow: hidden;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Original: 0 0 4px 0 black; */

    /* Provide same gap surrounding the snackbar so that
    it does not stick to the edge of the page or container */
    margin-top: var(--js-snackbar-wrapper-margin-top-bottom);
    margin-bottom: var(--js-snackbar-wrapper-margin-top-bottom);
    margin-left: var(--js-snackbar-wrapper-margin-left-right);
    margin-right: var(--js-snackbar-wrapper-margin-left-right);
    border-radius: var(--border-radius-xtiny);

    transition-property: all;
    transition-timing-function: ease;
    transition-duration: var(--js-snackbar-wrapper-transition-duration);
}

.js-snackbar {
    display: inline-flex;
    flex-grow: 1;

    font-family: var(--font-family-secondary);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);

    /* The padding cannot be set here else the .js-snackbar__close cannot be flushed to the top, bottom and right
    The top and bottom padding will be set by .js-snackbar__message-wrapper
    The left and right padding will be set by .js-snackbar__icon-wrapper and .js-snackbar__message-wrapper */
    /* padding: 10px 12px; */

    margin: 0; /* Set the margin in .js-snackbar__wrapper instead */
    border-radius: var(--border-radius-xtiny);
    /* Does not work, set the shadow in js-snackbar__wrapper instead */
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); */ /* Original: 0 0 4px 0 black; */
    box-sizing: border-box;

    /* Used for background colors as well as icon colors */
    --js-snackbar--success-color: var(--system-success-color);
    --js-snackbar--error-color: var(--system-error-color);
    --js-snackbar--warning-color: var(--system-warning-color);
    --js-snackbar--info-color: var(--system-info-color);
}
    .js-snackbar.light {
        color: #262626;
        background-color: #f8f8f8;
    }
    .js-snackbar.dark {
        color: #eee;
        background-color: #262626;
    }

/* Background colors */
.js-snackbar--success  {
    background-color: var(--js-snackbar--success-color) !important;
}
.js-snackbar--error {
    background-color: var(--js-snackbar--error-color) !important;
}
.js-snackbar--warning  {
    background-color: var(--js-snackbar--warning-color) !important;
}
.js-snackbar--info {
    background-color: var(--js-snackbar--info-color) !important;
}

/* Icon area left strip colors */
.js-snackbar--success-strip,
.js-snackbar--error-strip,
.js-snackbar--warning-strip,
.js-snackbar--info-strip {
    border-left-width: 3px;
    border-left-style: solid;
}
.js-snackbar--success-strip  {
    border-left-color: var(--js-snackbar--success-color);
}
.js-snackbar--error-strip {
    border-left-color: var(--js-snackbar--error-color);
}
.js-snackbar--warning-strip  {
    border-left-color: var(--js-snackbar--warning-color);
}
.js-snackbar--info-strip {
    border-left-color: var(--js-snackbar--info-color);
}
/*----------------------------------------------------------------------------*/
/*#endregion */



/*#region Icon*/
/*------------------------------------------------------------------------------
Icon
------------------------------------------------------------------------------*/
.js-snackbar__icon-wrapper {
    position: relative;

    display: none;
    margin: 0;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: var(--border-radius-xtiny) 0 0 var(--border-radius-xtiny);
    background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
}

.js-snackbar__icon {
    /* Icon, message and action are all center align vertically
    so that the animation looks uniform for these elements  */
    display: inline-flex !important; /* Could be overridden by font awesome */
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    border: 0;
    margin: 0;
    text-align: center;

    width: 26px;
    height: 26px;
    border-radius: 26px;

    /* font-size: var(--font-size-small); */
    font-size: 16px; /* Fix the icon font size (16 is also the default for font awesome) */
    /* font-weight: 900; */ /* Fix the icon weight (900 is also the default for font awesome) */

    /* -webkit-text-stroke: 1px; */ /* Increase font thickness (weight) */
    background-color: white; /* Use pure white */
}

/* Icon colors */
.js-snackbar--success .js-snackbar__icon  {
    color: var(--js-snackbar--success-color);
    -webkit-text-stroke: 0.5px; /* /* Increase font thickness (weight) */
}
.js-snackbar--error .js-snackbar__icon {
    color: var(--js-snackbar--error-color);
    -webkit-text-stroke: 0.5px; /* /* Increase font thickness (weight) */
}
.js-snackbar--warning .js-snackbar__icon  {
    color: var(--js-snackbar--warning-color);
    -webkit-text-stroke: 0.5px; /* /* Increase font thickness (weight) */
}
.js-snackbar--info .js-snackbar__icon {
    color: var(--js-snackbar--info-color);
    -webkit-text-stroke: 0.5px; /* /* Increase font thickness (weight) */
}
/*----------------------------------------------------------------------------*/
/*#endregion */



/*#region Message*/
/*------------------------------------------------------------------------------
Message
------------------------------------------------------------------------------*/
.js-snackbar__message-wrapper {
    /* Icon, message and action are all center align vertically
    so that the animation looks uniform for these elements  */
    display: flex;
    align-items: center;
    
    flex: 1;
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 12px;
}
    .js-snackbar__message-wrapper.icon-area-separator {
        padding-left: 12px;
    }

.js-snackbar__message {
    display: inline-block;
}
    .js-snackbar__message ul {
        margin: 0;
        padding: 0 0 0 15px;
        /*list-style-type: none;*/
    }
        .js-snackbar__message ul li {
        }
/*----------------------------------------------------------------------------*/
/*#endregion */



/*#region Action*/
/*------------------------------------------------------------------------------
Action: An array of additional clickable actions before the close button
------------------------------------------------------------------------------*/
.js-snackbar__action {
    /* Icon, message and action are all center align vertically
    so that the animation looks uniform for these elements  */
    display: flex;
    align-items: center;

    color: white; /* Use pure white */
    padding: 0 10px;
    cursor: pointer;
}

.js-snackbar__action:hover {
    /* opacity: 1.0; */
    background-color: rgba(0, 0, 0, 0.0875);
}
/*----------------------------------------------------------------------------*/
/*#endregion */



/*#region Close icon*/
/*------------------------------------------------------------------------------
Close icon
------------------------------------------------------------------------------*/
.js-snackbar__close {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 10px;
    cursor: pointer;
    user-select: none;
    
    opacity: .8;
    -webkit-text-stroke: 0.25px; /* /* Increase font thickness (weight) */
}
.js-snackbar__close:hover {
    opacity: 1.0;
    /* background-color: rgba(0, 0, 0, 0.0875); */
}


.js-snackbar.light .js-snackbar__close {
    color: #D2D2D2; /* Use pure black */
    background-color: rgba(24, 23, 23, 0.02); /*rgba(0, 0, 0, 0.0375);*/
}

/* Added to customize hover effect */
.js-snackbar.light .js-snackbar__close:hover {
    color: #000000;
    opacity: 1.0;
    /* background-color: rgba(0, 0, 0, 0.0875); */
}
.js-snackbar.dark .js-snackbar__close {
    color: white; /* Use pure white */
    background-color: rgba(0, 0, 0, .0875);
}
/*----------------------------------------------------------------------------*/
/*#endregion */