div.alert {
    --padding: 16px;
    --iconPadding: 15px;
    --iconSize: 30px;

    &.inline {
        --padding: 8px;
        --iconPadding: 10px;
        --iconSize: 20px;
        font-size: 15px;
    }

    padding: var(--padding);
    border: solid var(--taurusNetworkDarkBlue) 1px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: var(--borderRadius);
    color: white;

    background-size: var(--iconSize);
    background-repeat: no-repeat;
    background-position: var(--iconPadding) center;
    padding-left: calc(var(--iconPadding) + var(--iconSize) + var(--iconPadding));

    &.info {
        background-color: var(--infoColour);;
        background-image: url("../../images/alerts/circle-info-solid-oxnKbZP.svg");
    }

    &.success {
        background-color: var(--successColour);
        background-image: url("../../images/alerts/circle-check-solid-ENkBL7t.svg");
    }

    &.danger {
        background-color: var(--dangerColour);
        background-image: url("../../images/alerts/circle-exclamation-solid-XUpYmCc.svg");
    }

    &.not-implemented {
        background-color: var(--experimentColour);
        background-image: url("../../images/alerts/code-sharp-regular-cEKtaIb.svg");
    }

    &.warning {
        background-color: var(--warningColour);
        background-image: url("../../images/alerts/circle-exclamation-solid-XUpYmCc.svg");
    }

    &.action {
        display: flex;
        align-items: center;

        div {
            flex: 1;
        }

        button,button {

        }
    }
}