.av-snackbar {
    position         : fixed;
    left             : 8px;
    right            : 8px;
    bottom           : 8px;
    z-index          : 1400;
    background-color : var(--white);
    border-radius    : 4px;
    overflow         : hidden;
}

.av-snackbar-container {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    align-self      : flex-start;
    flex-wrap       : wrap;
    flex-grow       : initial;
    min-width       : 288px;
    height          : auto;
    padding         : 6px 16px;
    color           : rgb(255, 255, 255);
    font-size       : 1rem;
    font-weight     : 400;
    line-height     : 1.43;
    letter-spacing  : 0.01071em;
    background-color: rgb(50, 50, 50);
    box-shadow      : rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px;
    border-radius   : 4px;
    overflow        : hidden;
    transition      : 0.3s;
}

.av-snackbar.start-hidden,
.av-snackbar.hidden {
    visibility : hidden;
    opacity    : 0;
    transition : 0.3s;
}

.av-snackbar.active {
    visibility : visible;
    opacity    : 1;
    transition : 0.1s;
}

.av-snackbar.active .av-snackbar-container {
    transform  : scale(1);
    transition : 0.1s;
}

.av-snackbar-content {
    padding : 8px 0px;
}

.av-snackbar-close,
.av-snackbar-icon {
    width  : 30px;
    height : 30px;
    cursor : pointer;
}

.av-snackbar-icon {
    margin-right: 5px;
}
.av-snackbar-close {
    margin-left: 5px;
    color      : black;
    fill       : black;
    stroke     : black;
}

.av-snackbar-close svg,
.av-snackbar-icon svg {
    width  : 100%;
    height : 100%;
    color  : currentColor;
    fill   : currentColor;
    stroke : currentColor;
}

.av-snackbar.bottom-center {
    bottom    : 24px;
    left      : 50%;
    right     : auto;
    transform : translateX(-50%);
}

.av-snackbar.bottom-left {
    bottom : 24px;
    left   : 24px;
    right  : auto;
}

.av-snackbar.bottom-right {
    bottom : 24px;
    right  : 24px;
    left   : auto;
}

.av-snackbar.top-center {
    top       : 24px;
    left      : 50%;
    right     : auto;
    transform : translateX(-50%);
}

.av-snackbar.top-left {
    top   : 24px;
    left  : 24px;
    right : auto;
}

.av-snackbar.top-right {
    top       : 24px;
    right     : 24px;
    left      : auto;
}

.av-snackbar-container.success {
    color            : var(--success-color);
    background-color : rgba(var(--success-rgb), 0.2)
}
.av-snackbar-container.success svg {
    color : var(--success)
}

.av-snackbar-container.error {
    color            : var(--danger-color);
    background-color : rgba(var(--danger-rgb), 0.2)
}
.av-snackbar-container.error svg {
    color : var(--danger)
}

.av-snackbar-container.warning {
    color            : var(--warning-color);
    background-color : rgba(var(--warning-rgb), 0.2)
}
.av-snackbar-container.warning svg {
    color : var(--warning)
}

.av-snackbar-container.info {
    color            : var(--info-color);
    background-color : rgba(var(--info-rgb), 0.2)
}
.av-snackbar-container.info svg {
    color : var(--info)
}