:root {
    --alert-success : rgba(118, 189, 87, 1);
    --alert-error   : rgba(214, 45, 48, 1);
    --alert-warning : rgba(238, 146, 19, 1);
    --alert-info    : rgba(63, 175, 239, 1);
}

.alert,
.alert * {
    box-sizing : border-box;
    margin     : 0;
    padding    : 0;
}

.alert {
    font-size        : 16px;
    position         : relative;
    z-index          : 1;
    left             : 0;
    display          : flex;
    overflow         : hidden;
    align-items      : flex-start;
    justify-content  : space-between;
    max-width        : 350px;
    min-height       : 40px;
    margin-right     : auto;
    margin-left      : auto;
    padding          : 8px 16px;
    transition       : left .5s ease-in;
    opacity          : 1;
    border-radius    : 8px;
    background-color : rgba(255, 255, 255, 1);
    box-shadow       : 0 5px 5px -1px rgba(115, 111, 110, 0.1);
}

.alert:before {
    position         : absolute;
    z-index          : -1;
    top              : 0;
    left             : 0;
    display          : block;
    width            : 100%;
    height           : 100%;
    content          : '';
    pointer-events   : none;
    opacity          : .15;
    background-color : currentColor
}

.alert + .alert {
    margin-top : 16px;
}

.alert__info {
    display         : flex;
    align-items     : center;
    flex-shrink     : 0;
    justify-content : center;
    width           : 20px;
    height          : 20px;
    margin-right    : 8px;
}

.alert__message {
    font-size    : inherit;
    flex-grow    : 1;
    margin-right : 16px;
    color        : inherit;
}

.alert__close {
    font-weight      : 900;
    line-height      : inherit;
    position         : relative;
    z-index          : 1;
    display          : flex;
    overflow         : hidden;
    align-items      : center;
    flex-shrink      : 0;
    justify-content  : center;
    width            : 20px;
    height           : 20px;
    cursor           : pointer;
    color            : inherit;
    border           : none;
    border-radius    : 8px;
    background-color : rgba(255, 255, 255, 0);
}

.alert__close:after {
    position         : absolute;
    z-index          : -1;
    top              : 0;
    left             : 0;
    display          : block;
    width            : 100%;
    height           : 100%;
    content          : '';
    opacity          : 0;
    border           : 1px solid currentColor;
    background-color : currentColor;
}

.alert__close:hover:after {
    opacity : .25;
}

.alert__progress {
    position      : absolute;
    bottom        : 0;
    left          : 0;
    width         : 100%;
    height        : 3px;
    color         : inherit;
    border        : none;
    border-radius : 24px;
}

.alert__progress::-webkit-progress-value {
    transition       : all .5s linear;
    border-radius    : 100vw;
    background-color : currentColor;
}

.alert__progress::-webkit-progress-bar {
    border-radius    : 100vw;
    background-color : transparent;
}

.alert__progress::-moz-progress-bar {
    border-radius    : 100vw;
    background-color : transparent;
}

.alert__close:hover {
    opacity : .85;
}

.alert-success {
    color : var(--alert-success);
}

.alert-error {
    color : var(--alert-error);
}

.alert-warning {
    color : var(--alert-warning);
}

.alert-info {
    color : var(--alert-info);
}

.alert-is-open {
    animation-name            : alertIn;
    animation-duration        : .5s;
    animation-timing-function : ease;
}

.alert-is-closed {
    left       : 200%;
    transition : left .5s ease-out;
    opacity    : 1;
}

@keyframes alertIn {
    0% {
        left : 100%
    }
    to {
        left : 0;
    }
}