@import '../core/theme.scss';

.toast {
    display: block;
    width: 100%;
    padding: 0.75rem 1.25rem;
    background-color: var(--toast-primary-bg);
    border: 1px solid var(--toast-primary-bg);
    border-radius: 2px;
    color: #fff;
    position: relative;
    margin: 0.5rem;

    &.toast--translucent {
        opacity: 0.5;

        &:hover {
            opacity: 1;
        }
    }

    p {
        margin: 0;
    }

    a {
        color: var(--cirrus-light);
        transition: all 0.3s;

        &:hover {
            opacity: 0.8;
            transition: all 0.3s;
        }
    }

    .toast__title {
        margin: 0;
        margin-top: 1rem;
    }

    .btn-close {
        position: absolute;
        right: 1rem;
        top: 1rem;
    }

    /* TOAST TYPES */

    &.toast--primary {
        background-color: var(--cirrus-primary);
        border-color: var(--cirrus-primary);
    }

    @each $color, $value in $control-themes {
        &.toast--#{$color} {
            background-color: $value;
            border-color: $value;
        }
    }
}