/* Block: dot-icon */
.dot-icon {
    display: inline-flex;
    width: calc(32 * var(--tgc-u));
    height: calc(32 * var(--tgc-u));
    flex-shrink: 0;
}

.dot-icon svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.dot-icon .dot-solid {
    fill: var(--tgc-violet);
}

.dot-icon .dot-soft {
    fill: var(--tgc-violet);
    opacity: 0.38;
}

.dot-icon .dot-ring {
    fill: none;
    stroke: var(--tgc-violet);
    stroke-width: 2;
    opacity: 0.45;
}