.primary{--text:var(--text-invert);--border:transparent;--cursor:pointer;--tw-shadow-color:var(--shadow);.icon{filter:var(--icon-primary)}&.blue{--bg:var(--blue);--text:var(--blue-text);.icon{filter:var(--icon-primary-blue)}&:hover{--bg:var(--blue-hover)}}&.coral{--bg:var(--coral);&:hover{--bg:var(--coral-hover)}}&.green{--bg:var(--green);&:hover{--bg:var(--green-hover)}}&.gold{--bg:var(--gold);--text:var(--gold-text);.icon{filter:var(--icon-primary-gold)}&:hover{--bg:var(--gold-hover)}}&.aqua{--bg:var(--aqua);&:hover{--bg:var(--aqua-hover)}}&.pink{--bg:var(--pink);&:hover{--bg:var(--pink-hover)}}&.purple{--bg:var(--purple);&:hover{--bg:var(--purple-hover)}}&:disabled{--bg:var(--button-bg-disabled);--cursor:not-allowed;--text:var(--text-disabled-primary);.icon{filter:var(--icon-primary-disabled)}&:hover{--bg:var(--button-bg-disabled)}}}.secondary{--bg:transparent;--text:var(--text);--cursor:pointer;--tw-shadow-color:transparent;.icon{filter:var(--icon-secondary-tertiary)}&.blue{--border:var(--blue-border);&:hover{--bg:var(--icon-blue-hover)}}&.coral{--border:var(--coral-border);&:hover{--bg:var(--icon-coral-hover)}}&.green{--border:var(--green-border);&:hover{--bg:var(--icon-green-hover)}}&.gold{--border:var(--gold-border);--text:var(--text);&:hover{--bg:var(--icon-gold-hover)}}&.aqua{--border:var(--aqua-border);--text:var(--text);&:hover{--bg:var(--icon-aqua-hover)}}&.pink{--border:var(--pink-border);--text:var(--text-regular-1);&:hover{--bg:var(--icon-pink-hover)}}&.purple{--border:var(--purple-border);--text:var(--text-regular-1);&:hover{--bg:var(--icon-purple-hover)}}&:disabled{--border:var(--border-disabled);--text:var(--text-muted);--cursor:not-allowed;.icon{filter:var(--icon-button-disabled)}&:hover{--bg:var(--bg-secondary)}}}.tertiary{--bg:transparent;--text:var(--text-regular-1);--border:transparent;--cursor:pointer;--tw-shadow-color:transparent;.icon{filter:var(--icon-secondary-tertiary)}&.blue{&:hover{--bg:var(--icon-blue-hover)}}&.coral{&:hover{--bg:var(--icon-coral-hover)}}&.green{&:hover{--bg:var(--icon-green-hover)}}&.gold{&:hover{--bg:var(--icon-gold-hover)}}&.aqua{&:hover{--bg:var(--icon-aqua-hover)}}&.pink{&:hover{--bg:var(--icon-pink-hover)}}&.purple{&:hover{--bg:var(--icon-purple-hover)}}&:disabled{--border:transparent;--text:var(--text-muted);--cursor:not-allowed;.icon{filter:var(--icon-button-disabled)}&:hover{--bg:var(--bg-tertiary)}}}.icon-button{img{filter:var(--icon-secondary-tertiary)}&:hover{&.aqua{background-color:var(--icon-aqua-hover)}&.coral{background-color:var(--icon-coral-hover)}&.green{background-color:var(--icon-green-hover)}&.blue{background-color:var(--icon-blue-hover)}&.gold{background-color:var(--icon-gold-hover)}&.pink{background-color:var(--icon-pink-hover)}&.purple{background-color:var(--icon-purple-hover)}}&.disabled{cursor:not-allowed;img{filter:var(--icon-button-disabled)}&:hover{background-color:transparent}}}