%theme-light { --theme-dark-none: ; --theme-light-none: initial; } %theme-dark { --theme-dark-none: initial; --theme-light-none: ; } %with-icon { background-repeat: no-repeat; background-position: center; } %with-mask { -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-repeat: no-repeat; mask-position: center; background-color: currentColor; } %with-glyph-icon { font-weight: var(--typo-weight-normal); background-color: rgb(var(--tone-gray-100)); visibility: visible; padding: 0 4px; } %as-pseudo { display: inline-block; content: ''; visibility: visible; background-size: contain; width: 1rem; /* 16px */ height: 1rem; /* 16px */ vertical-align: text-top; } %led-icon { position: relative; box-sizing: border-box; width: 12px; height: 12px; } %led-icon::after, %led-icon::before { content: ''; display: block; width: 100%; height: 100%; border-radius: 100%; } %led-icon::before { border: 1px solid currentColor; opacity: 0.5; } %led-icon::after { position: absolute; top: 2px; left: 2px; width: calc(100% - 4px); height: calc(100% - 4px); background-color: currentColor; }