.ds-circular-button{border-radius:var(--radius-full);width:40px;height:40px;transition:background-color var(--motion-duration-base) var(--motion-ease-standard), border-color var(--motion-duration-base) var(--motion-ease-standard), opacity var(--motion-duration-base) var(--motion-ease-standard);cursor:pointer;color:inherit;border:none;justify-content:center;align-items:center;padding:0;text-decoration:none;display:inline-flex}.ds-circular-button--default{width:40px;height:40px}.ds-circular-button--compact{width:32px;height:32px}.ds-circular-button--compact .ds-circular-button__icon{--icon-size:var(--icon-size-sm)}.ds-circular-button__icon{--icon-size:var(--icon-size-md);flex-shrink:0;line-height:1}.ds-circular-button--primary{background-color:var(--color-action-primary-bg);border:none}.ds-circular-button--primary .ds-circular-button__icon{color:var(--color-action-primary-text)}.ds-circular-button--primary.ds-circular-button--hover{background-color:var(--color-action-primary-bg-hover)}.ds-circular-button--primary.ds-circular-button--hover .ds-circular-button__icon{color:var(--color-action-primary-text-active)}.ds-circular-button--primary.ds-circular-button--active{background-color:var(--color-action-primary-bg-active)}.ds-circular-button--primary.ds-circular-button--active .ds-circular-button__icon{color:var(--color-action-primary-text-active)}.ds-circular-button--primary.ds-circular-button--disabled{opacity:.4;cursor:not-allowed}.ds-circular-button--primary:not(.ds-circular-button--disabled):hover{background-color:var(--color-action-primary-bg-hover)}.ds-circular-button--primary:not(.ds-circular-button--disabled):hover .ds-circular-button__icon{color:var(--color-action-primary-text-active)}.ds-circular-button--primary:not(.ds-circular-button--disabled):active{background-color:var(--color-action-primary-bg-active)}.ds-circular-button--primary:not(.ds-circular-button--disabled):active .ds-circular-button__icon{color:var(--color-action-primary-text-active)}.ds-circular-button--secondary{border:var(--border-xs) solid var(--color-action-primary-border);background-color:#0000}.ds-circular-button--secondary .ds-circular-button__icon{color:var(--color-action-icon-default)}.ds-circular-button--secondary.ds-circular-button--hover{background-color:var(--color-action-primary-bg-hover)}.ds-circular-button--secondary.ds-circular-button--hover .ds-circular-button__icon{color:var(--color-action-icon-active)}.ds-circular-button--secondary.ds-circular-button--active{background-color:var(--color-action-primary-bg-active)}.ds-circular-button--secondary.ds-circular-button--active .ds-circular-button__icon{color:var(--color-action-icon-active)}.ds-circular-button--secondary.ds-circular-button--disabled{opacity:.4;cursor:not-allowed}.ds-circular-button--secondary:not(.ds-circular-button--disabled):hover{background-color:var(--color-action-primary-bg-hover)}.ds-circular-button--secondary:not(.ds-circular-button--disabled):hover .ds-circular-button__icon{color:var(--color-action-icon-active)}.ds-circular-button--secondary:not(.ds-circular-button--disabled):active{background-color:var(--color-action-primary-bg-active)}.ds-circular-button--secondary:not(.ds-circular-button--disabled):active .ds-circular-button__icon{color:var(--color-action-icon-active)}.ds-circular-button--tertiary{background-color:var(--color-action-passive-bg);border:none}.ds-circular-button--tertiary .ds-circular-button__icon{color:var(--color-icon-primary)}.ds-circular-button--tertiary.ds-circular-button--hover{background-color:var(--color-action-passive-bg-hover)}.ds-circular-button--tertiary.ds-circular-button--active{background-color:var(--color-action-passive-bg-active)}.ds-circular-button--tertiary.ds-circular-button--disabled{opacity:.4;cursor:not-allowed}.ds-circular-button--tertiary:not(.ds-circular-button--disabled):hover{background-color:var(--color-action-passive-bg-hover)}.ds-circular-button--tertiary:not(.ds-circular-button--disabled):active{background-color:var(--color-action-passive-bg-active)}.ds-circular-button--loading{cursor:progress;pointer-events:none}.ds-circular-button:focus-visible{outline:2px solid var(--color-action-primary-bg);outline-offset:2px}
