:root {
    --toujou-docs-primary-color: #34dcff;
    --toujou-docs-primary-color-o-15: color-mix(in sRGB, var(--toujou-docs-primary-color) 15%, transparent);
}

/* "toujou Docs" note */
.note.note-category-10 {
    --note-category-10-color-primary: var(--toujou-docs-primary-color);
    --note-category-10-color-primary-o-15: color-mix(in sRGB, var(--note-category-10-color-primary) 15%, transparent);
    --typo3-note-border-color: var(--toujou-docs-primary-color);
    --typo3-note-header-bg: var(--toujou-docs-primary-color-o-15);
}

.table .toujou-docs-widget-row {
    --typo3-table-bg: var(--toujou-docs-primary-color-o-15);
    --typo3-table-border-color:  color-mix(in srgb, var(--typo3-table-bg), var(--toujou-docs-primary-color) 10%);
}

.note__link {
    text-decoration: underline;
    cursor: pointer;
    opacity: 0.8;
}

.note__link:is(:hover, :focus-visible) {
    opacity: 1;
}

.note__link::before {
    content: "";
    display: inline-block;
    height: 1.25em;
    width: 1.25em;
    position: relative;
    top: 4px;
    margin-right: .5ch;
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    background-color: var(--typo3-text-color-link);
}

.note__link--internal::before {
    mask-image: url("../Icons/note-link-icon-internal.svg");
}

.note__link--external::before {
    mask-image: url("../Icons/note-link-icon-external.svg");
}