$alert-variants: note important warning;

div.admonition {
    border-radius: $border-radius;
    border: 0;
    border: 1px solid transparent;
    padding: 1.25rem;
    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: 1.4;
        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;
    }

    &.toggle {
        .admonition-title {
            padding: 1.25rem 2.5rem 1.25rem 1.25rem;
            margin: -1.25rem;
            
            &:active,
            &:focus,
            &:hover {
                box-shadow: none;
            }
        }

        &.toggle-hidden {
            .admonition-title {
                margin-bottom: 0;
            }
        }

        .toggle-button {
            top: 1.25rem;
            right: 1rem;

            &:before {
                content: "";
            }
        }
    }

    @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);
            }

            &.toggle {
                &:hover {
                    border-color: var(--alert-#{$variant}-link-decoration-color);
                }
            }

            .toggle-button {
                svg {
                    stroke: var(--alert-#{$variant}-color);
                }
            }

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

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