@codex-storage/marketplace-ui-components/dist/assets/ButtonIcon.css

Marketplace UI components for Codex decentralized storage network.

@property --codex-button-icon-background-color{syntax: "<color>"; inherits: false; initial-value: rgb(47,47,47);}@property --codex-button-icon-border-color{syntax: "<color>"; inherits: false; initial-value: rgba(150,150,150,.2);}@property --codex-button-icon-color-disabled{syntax: "<color>"; inherits: false; initial-value: rgb(47,47,47) 33;}@property --codex-button-icon-size{syntax: "<length>"; inherits: true; initial-value: 60px;}.button-icon{display:flex;align-items:center;justify-content:center;background-color:var(--codex-button-icon-background-color, rgb(47, 47, 47));border-radius:50%;cursor:pointer;transition:box-shadow .35s;border:none;gap:6px;border:1px solid var(--codex-button-icon-border-color);height:var(--codex-button-icon-size, 60px);width:var(--codex-button-icon-size, 60px);padding:0}.button-icon.button-icon--big{--codex-button-icon-size: 60px}.button-icon.button-icon--small{--codex-button-icon-size: 40px}.button-icon:not(:disabled):hover{cursor:pointer;box-shadow:0 0 0 2px var(--codex-button-icon-border-color, rgba(150, 150, 150, .2))}.button-icon:disabled{color:var(--codex-button-icon-color-disabled, rgb(113, 113, 113));cursor:not-allowed}.button-icon.button-icon--buzz{-webkit-animation-name:buzz;animation-name:buzz;-webkit-animation-duration:.45s;animation-duration:.45s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:5;animation-iteration-count:5}.button-icon.button-icon--bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:1;animation-iteration-count:1}.button-icon svg{mix-blend-mode:difference}@keyframes buzz{0%{-webkit-transform:translateX(0) rotate(0deg);transform:translate(0) rotate(0)}25%{-webkit-transform:translateX(-3px) rotate(-15deg);transform:translate(-3px) rotate(-15deg)}50%{-webkit-transform:translateX(0) rotate(0deg);transform:translate(0) rotate(0)}75%{-webkit-transform:translateX(3px) rotate(15deg);transform:translate(3px) rotate(15deg)}to{-webkit-transform:translateX(0) rotate(0deg);transform:translate(0) rotate(0)}}@keyframes bounce{0%{-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}50%{-webkit-transform:translateY(-10px) scale(1);transform:translateY(-10px) scale(1)}to{-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}}