$alert-variants: note important warning;

div.admonition {
    border-radius: $border-radius;
    border: 0;
    border: 1px solid transparent;
    padding: 1.5rem;
    font-size: $font-size-md;
    background-color: var(--theme-light-bg);
    color: var(--headings-color);

    p.admonition-title {
        font-family: inherit;
        font-size: $font-size-md;
        font-weight: $font-weight-bold;
        line-height: 100%;
        display: block;
    }

    a {
        color: var(--link-color);
        text-decoration: underline;
        text-decoration-style: dotted;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.2rem;
        text-decoration-color: transparent;
        transition: text-decoration-color 300ms;
    }

    code {
        color: currentColor;

        &.xref {
            border: 0;
        }
    }

    .highlight {
        background-color: transparent;
    }

    @each $variant in $alert-variants {
        &.#{$variant} {
            border-color: var(--alert-#{$variant}-border-color);
            color: var(--alert-#{$variant}-color);
            background-color: var(--alert-#{$variant}-bg);

            code,
            .copybtn,
            .highlight pre {
                background-color: var(--alert-#{$variant}-code-bg);
                color: var(--alert-#{$variant}-color);
            }

            a {
                color: currentColor;
                text-decoration-color: var(--alert-#{$variant}-link-decoration-color);

                &:hover {
                    text-decoration-color: var(--alert-#{$variant}-color);
                }
            }
        }
    }
}