:root{.button-component{display:inline-flex;justify-content:center;align-items:center;border-radius:var(--radius-full);font-weight:var(--font-weight-semibold);transition:all .2s ease-in-out;&:focus-visible{outline:none;box-shadow:0 0 0 2px var(--background-primary),0 0 0 4px var(--border-focus)}&.button-sm{font-size:var(--button-sm);gap:var(--spacing-3xs);padding:var(--button-padding-sm-vertical) var(--button-padding-sm-horizontal);.button-icon svg{width:16px;height:16px}}&.button-md{font-size:var(--button-md);gap:var(--spacing-2xs);padding:var(--button-padding-md-vertical) var(--button-padding-md-horizontal);.button-icon svg{width:20px;height:20px}}&.button-lg{font-size:var(--button-md);gap:var(--spacing-2xs);padding:var(--button-padding-lg-vertical) var(--button-padding-lg-horizontal);.button-icon svg{width:24px;height:24px}}&.button-primary{background:linear-gradient(90deg,var(--blue-500),var(--blue-400));color:var(--gray-white);&:hover{background:linear-gradient(90deg,var(--blue-700),var(--blue-500))}&.button-disabled,&:disabled{background:var(--background-disabled);color:var(--text-disabled)}}&.button-secondary{background-color:var(--button-secondary);color:var(--text-inverse);&:hover{background-color:var(--button-secondary-hover)}&.button-disabled,&:disabled{background:var(--background-disabled);color:var(--text-disabled)}}&.button-tertiary{background-color:var(--background-primary-alt);border:2px solid var(--border-primary);color:var(--text-primary);&:hover{background-color:var(--background-primary-hover);border-color:var(--border-solid)}&.button-disabled,&:disabled{color:var(--text-disabled);border-color:var(--border-disabled)}}&.button-disabled,&.button-success,&:disabled{background-color:var(--background-primary-alt)}&.button-success{border:2px solid var(--border-success);.button-content{color:var(--text-success)}&:hover{background-color:var(--background-success-light)}&.button-disabled,&:disabled{color:var(--text-disabled);border-color:var(--border-disabled)}}&.button-text{background-color:transparent;color:var(--text-primary);&:hover{background-color:var(--background-primary-hover)}&.button-disabled,&:disabled{color:var(--text-disabled);background-color:transparent}}}}