[data-brand] { --brand-color: var(--white); --brand-mark-color: var(--black); --brand-mark-height: auto; --brand-mark-padding: 0.2rem 0.3rem; --brand-mark-width: auto; --brand-opacity: 0.8; --brand-cube-size: 0.75rem; display: flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--brand-color); font-family: var(--font-mono); font-size: var(--font-size-base); line-height: 1; text-decoration: none; text-transform: lowercase; opacity: var(--brand-opacity); @media (hover: hover) and (pointer: fine) { &:where(a):hover { opacity: 1; } } &:where(a):active { --brand-color: var(--orange); opacity: 1; } &:where(a)[data-press] { --brand-color: var(--white); opacity: 1; } &[data-tone="receipt"] { --brand-color: var(--black); --brand-mark-color: var(--white); --brand-mark-height: 1.625rem; --brand-mark-padding: 0; --brand-mark-width: 1.625rem; --brand-opacity: 1; --brand-cube-size: 0.55rem; } [data-brand-mark] { display: inline-grid; place-items: center; width: var(--brand-mark-width); height: var(--brand-mark-height); padding: var(--brand-mark-padding); color: var(--brand-mark-color); background-color: var(--brand-color); border-radius: 0.25rem; } [data-brand-text] { line-height: 1; } [data-cube="mark"] { --size: var(--brand-cube-size); } &[data-animated] [data-cube="mark"] { animation: cube-fill 5s linear infinite alternate; } }