@import '../../containers/Application/colors.scss';

$snackbarHeight: 40px;

$snackbarErrorColor: $white;
$snackbarErrorBackgroundColor: $persianRed;
$snackbarWarningColor: $blueZodiac;
$snackbarWarningBackgroundColor: $gold;

.snackbar {
    height: $snackbarHeight;
    padding: 0 20px;
    display: flex;
    align-items: center;
    will-change: margin-top;
    transition: margin-top .15s;
    width: 100%;

    &:not(.visible) {
        transition: margin-top .15s, visibility 0s .15s;
        visibility: hidden;
        margin-top: -$snackbarHeight;
    }
}

.icon {
    padding-right: 10px;
    font-size: 20px;
    display: flex;
    align-items: center;
    align-self: stretch;
    justify-content: center;
}

.text {
    font-size: 12px;
    flex-grow: 1;
}

.close-icon {
    font-size: 14px;
    font-weight: 900;
    padding: 3px;
}

.clickable {
    cursor: pointer;
}

.error {
    background-color: $snackbarErrorBackgroundColor;
    color: $snackbarErrorColor;

    .close-button {
        background-color: $snackbarErrorBackgroundColor;
        color: $snackbarErrorColor;
    }
}

.warning {
    background-color: $snackbarWarningBackgroundColor;
    color: $snackbarWarningColor;

    .close-button {
        background-color: $snackbarWarningColor;
        color: $snackbarWarningColor;
    }
}
