:root {
    --ila-toast-margin: 1rem;
    --ila-toast-padding-x: 25px;
    --ila-toast-padding-y: 15px;
}

/* toast area; allows for multiple toasts to stack on top of each other. */
.toast-holder {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
}
.toast-holder-inner {
    position: relative;
    display: flex;
    flex-flow: column-reverse;
}

.ila-toast--single-line .ila-toast__toast {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.ila-toast--single-line .ila-toast__heading {
    margin: 10px 10px 10px 0;
}
.ila-toast--single-line .ila-toast__heading h3 {
    margin: 0;
}
.ila-toast--single-line .ila-toast__content {
    flex-grow: 1;
}
.ila-toast--single-line .ila-toast__close-button {
    position: relative;
    margin: auto;
    order: 2;
}

.ila-toast--success .ila-toast__toast {
    background-color: #7de49b;
}
.ila-toast--info .ila-toast__toast {
    background-color: #98e9f2;
}
.ila-toast--warning .ila-toast__toast {
    background-color: #fed976;
}
.ila-toast--error .ila-toast__toast {
    background-color: #ffaea9;
}

.ila-toast__toast {
    border: 1px solid var(--il-gray-2);
    margin: var(--ila-toast-margin);
    padding: var(--ila-toast-padding-y) var(--ila-toast-padding-x);
    background-color: white;
    position: relative;
    width: 450px;
}

/* toasts will stack in order of appearance due to the order property */
.ila-toast.ila-toast--open {
    transition: opacity 0.5s linear, order 0.1s, display 1s allow-discrete;
    opacity: 1;
    order: 0;

    /* this is the secret sauce to make the transition work with display: none */
    @starting-style {
      opacity: 0
    }
}

.ila-toast.ila-toast--closed {
    transition: opacity 0.25s linear, order 1s,  display 1s allow-discrete;
    opacity: 0;
    order: 1;
    display: none;
}

.ila-toast.ila-toast--open.ila-toast--first {
    order: -1;
}

.ila-toast__heading {
    margin: 0;
    margin-bottom: 10px;
}

/* the only thing that should be in the content area is text.
   margin should come from the ila-toast__content class. */
.ila-toast__content p {
    margin: 0;
    padding: 0;
}

.ila-toast__content {
    margin: 10px 0;
}

.ila-toast__actions {
    margin: 0;
    margin-top: 10px;
}

.ila-toast__close-button {
    position: absolute;
    right: 0;
    top: 0;
    margin-top: calc(var(--ila-toast-padding-y) - 5px);
    margin-right: calc(var(--ila-toast-padding-x) - 5px);
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.ila-toast__close-button:hover,
.ila-toast__close-button:focus {
    transition: background-color 0.3s;
    background-color: var(--il-blue);
    color: white;
}

.ila-toast__close-icon {
    font-size: 35px;
}