/* Custom admonition colors for tunables page - Hydrolix brand colors */

/* Info admonitions (Default values) - using primary teal #36BDB1 */
.md-typeset .admonition.info,
.md-typeset details.info {
    border-color: #36BDB1 !important;
    border-left-color: #36BDB1 !important;
}

.md-typeset .admonition.info > .admonition-title,
.md-typeset details.info > summary {
    background-color: rgba(54, 189, 177, 0.1) !important;
}

.md-typeset .admonition.info > .admonition-title::before,
.md-typeset details.info > summary::before {
    background-color: #36BDB1 !important;
}

/* Example admonitions - using secondary teal #0CABA8 */
/* Override the default purple (#7c4dff) with our brand teal */

/* Border colors */
.md-typeset .admonition.example,
.md-typeset details.example {
    border-color: #0CABA8 !important;
    border-left-color: #0CABA8 !important;
}

/* Background color for title/summary - match the exact hex format from Material */
.md-typeset .example > .admonition-title,
.md-typeset .example > summary {
    background-color: #0caba81a !important;
}

/* Target the exact selector path for the summary element */
article.md-content__inner.md-typeset details.example summary,
.md-typeset .admonition.example > .admonition-title,
.md-typeset details.example > summary,
.md-typeset .admonition.example > summary,
details.example > summary {
    background-color: #0caba81a !important;
    border-left-color: #0CABA8 !important;
}

/* Icon color - ::before pseudo-element */
.md-typeset .example > .admonition-title::before,
.md-typeset .example > summary::before {
    background-color: #0CABA8 !important;
    -webkit-mask-image: var(--md-admonition-icon--example, url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 13v-2h14v2H7m0 6v-2h14v2H7M7 7V5h14v2H7M3 8V5H2V4h2v4H3m-1 9v-1h3v4H2v-1h2v-.5H3v-1h1V17H2m2.25-7a.75.75 0 0 1 .75.75c0 .2-.08.39-.21.52L3.12 13H5v1H2v-.92L4 11H2v-1h2.25Z"/></svg>'));
    mask-image: var(--md-admonition-icon--example, url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 13v-2h14v2H7m0 6v-2h14v2H7M7 7V5h14v2H7M3 8V5H2V4h2v4H3m-1 9v-1h3v4H2v-1h2v-.5H3v-1h1V17H2m2.25-7a.75.75 0 0 1 .75.75c0 .2-.08.39-.21.52L3.12 13H5v1H2v-.92L4 11H2v-1h2.25Z"/></svg>'));
}

/* Additional ::before selectors with all variations */
article.md-content__inner.md-typeset details.example summary::before,
.md-typeset .admonition.example > .admonition-title::before,
.md-typeset details.example > summary::before,
.md-typeset .admonition.example > summary::before,
details.example > summary::before {
    background-color: #0CABA8 !important;
}

/* Force override Material's default purple for example type with dir attribute */
[dir="ltr"] .md-typeset .example > .admonition-title::before,
[dir="ltr"] .md-typeset .example > summary::before,
[dir="ltr"] .md-typeset details.example > summary::before,
[dir="ltr"] .md-typeset .admonition.example > summary::before,
[dir="ltr"] article.md-content__inner.md-typeset details.example summary::before {
    background-color: #0CABA8 !important;
}

/* Tab styling to match brand colors */
.md-typeset .tabbed-set > input:checked + label {
    border-color: #36BDB1 !important;
    color: #36BDB1 !important;
}

.md-typeset .tabbed-set > input:first-child:checked ~ .tabbed-content {
    border-color: #36BDB1 !important;
}

/* Ensure the tab labels also get the right color */
.md-typeset .tabbed-labels > label:hover {
    color: #36BDB1 !important;
}