Template:Hatnote/styles.css

.tg-hatnote {
    position: relative;
    margin: 0.5rem 0;
    padding: 0.75rem 1rem;
    box-shadow: var(--tg-border-color-base) 0px 0px 0px 1px inset;
    border-radius: var(--tg-border-radius-medium);
    background: var(--tg-color-surface-2);
    font-size: var(--tg-font-size-small);
    line-height: var(--tg-line-height-xx-small);
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.tg-hatnote-icon {
    display: flex;
    align-items: center;
}

.tg-hatnote-icon .mw-file-element {
    display: block;
}

.tg-hatnote-icon .mw-file-element[src$=".svg"] {
    filter: var(--filter-invert);
    opacity: 0.5;
}

.tg-hatnote.tg-hatnote--red {
    background: var(--background-color-destructive-subtle);
    color: var(--color-emphasized);
}

.tg-hatnote.tg-hatnote--yellow {
    background: var(--background-color-warning-subtle);
    color: var(--color-emphasized);
}

.tg-hatnote.tg-hatnote--green {
    background: var(--background-color-success-subtle);
    color: var(--color-emphasized);
}