/* Admonition */
details, .admonition {
    /*background-color: rgb(var(--bs-secondary-bg-rgb), 0.55);*/
    /*border-color: var(--bs-border-color);*/
    border-radius: var(--bs-border-radius-xl);
    border-style: var(--bs-border-style);
    border-width: var(--bs-border-width);
    margin: 0.75rem auto;
    padding: 0.75rem;
    width: 75%;
}

.admonition {
    display: flex;
    flex-direction: column;
}

details > summary:before, .admonition-title:before {
    font-family: "bootstrap-icons";
    padding-right: 0.5rem;
}

details > summary, .admonition-title {
    font-weight: 550;
}

.admonition-title {
    margin: 0 !important;
}

details > summary + p, .admonition > p {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

details > summary + p:last-of-type, .admonition > p:last-of-type {
    margin-bottom: 0 !important;
}

/* Admoniiton Colors */

/* Orange */
details.warning, div.warning {
    background-color: var(--bs-warning-bg-subtle);
    border-color: var(--bs-warning-border-subtle);
}

details.warning > summary:before, .warning .admonition-title:before {
    color: var(--bs-warning-text-emphasis) !important;
}

.warning .admonition-title, details.warning > summary {
    color: var(--bs-warning-text-emphasis) !important;
}

/* Red */
details.important, div.important,
details.error, div.error,
details.danger, div.danger {
    background-color: var(--bs-danger-bg-subtle);
    border-color: var(--bs-danger-border-subtle);
}

details.important > summary:before, .important .admonition-title:before,
details.error > summary:before, .error .admonition-title:before,
details.danger > summary:before, .danger .admonition-title:before {
    color: var(--bs-danger-text-emphasis) !important;
}

.important .admonition-title, details.important > summary,
.error .admonition-title, details.error > summary,
.danger .admonition-title, details.danger > summary {
    color: var(--bs-danger-text-emphasis) !important;
}


/* Blue */
details.task, div.task {
    background-color: var(--bs-info-bg-subtle) !important;
    border-color: var(--bs-info-border-subtle) !important;
}

details.task > summary:before, .task .admonition-title:before {
    color: var(--bs-info-text-emphasis) !important;
}

.task .admonition-title, details.task > summary {
    color: var(--bs-info-text-emphasis) !important;
}

/* Purple */
details.hint, div.hint,
details.note, div.note,
details.tip, div.tip {
    background-color: var(--bs-primary-bg-subtle) !important;
    border-color: var(--bs-primary-border-subtle) !important;
}

details.hint > summary:before, .hint .admonition-title:before,
details.note > summary:before, .note .admonition-title:before,
details.tip > summary:before, .tip .admonition-title:before {
    color: var(--bs-primary-text-emphasis) !important;
}

.hint .admonition-title, details.hint > summary,
.note .admonition-title, details.note > summary,
.tip .admonition-title, details.tip > summary {
    color: var(--bs-primary-text-emphasis) !important;
}

/* Green */
details.solution, div.solution {
    background-color: var(--bs-success-bg-subtle) !important;
    border-color: var(--bs-success-border-subtle) !important;
}

details.solution > summary:before, .solution .admonition-title:before {
    color: var(--bs-success-text-emphasis) !important;
}

.solution .admonition-title, details.solution > summary {
    color: var(--bs-success-text-emphasis) !important;
}


/* Admonition Icons */
details.warning > summary:before, .warning .admonition-title:before {
    content: "\F33A";
}

details.important > summary:before, .important .admonition-title:before,
details.error > summary:before, .error .admonition-title:before,
details.danger > summary:before, .danger .admonition-title:before {
    content: "\F336";
}

details.task > summary:before, .task .admonition-title:before {
    content: "\F4C9";
}

details.hint > summary:before, .hint .admonition-title:before,
details.tip > summary:before, .tip .admonition-title:before,
details.note > summary:before, .note .admonition-title:before {
    content: "\F7F6";
}

details.solution > summary:before, .solution .admonition-title:before {
    content: "\F26A";
}

/* Admonition Collapse Icon */
details > summary {
    align-items: center;
    display: inline-flex;
    flex-direction: row;
    width: 100%;
}

details summary:after {
    content: "\F285";
    display: flex;
    font-family: bootstrap-icons;
    margin: 0 0 0 auto;
    text-align: right;
    transition: transform .35s ease;
    transform-origin: .5em 50%;
}

details[open] summary:after {
    transform: rotate(90deg) !important;
}

button {
    color: var(--bs-body-color) !important;
}

li > p {
    padding: unset;
    margin: unset;
}