/* Button */
.btn { display: flex; justify-content: center; align-items: center; width: auto; background-color: var(--color-secundary); border: 1px solid var(--color-secundary); color: var(--color-bg); padding: .8rem 1.6rem; border-radius: .6rem; font-weight: 600; gap: .8rem; cursor: pointer; }
.btn:hover { background-color: var(--color-primary); border-color: var(--color-primary); }
.btn.is-red { background-color: var(--color-red) !important; border-color: var(--color-red) !important; color: var(--color-bg) !important; }
.btn.is-green { background-color: var(--color-green) !important; border-color: var(--color-green) !important; color: var(--color-bg) !important; }
.btn.is-inactive { background-color: var(--color-bg-dark) !important; border-color: var(--color-border) !important; color: var(--color-text-dark) !important; cursor: no-drop; }
.btn.is-loading.is-active { background-color: var(--color-bg-dark) !important; border-color: var(--color-border) !important; color: var(--color-text-dark) !important; }
.btn.is-loading.is-active .icon { animation: buttonLoading 1s linear infinite; }
.btn.is-nobg { background-color: transparent !important; border-color: var(--color-border) !important; color: var(--color-text-dark) !important; }
.btn.is-nobg:hover { background-color: var(--color-bg-dark) !important; color: var(--color-text) !important; }
.btn-container { display: flex; gap: 1.6rem; margin-top: 1.6rem; }
@keyframes buttonLoading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Icon */
.icon { font-size: 2rem; }
.icon.is-small { font-size: 1.6rem; }
.icon-container { display: flex; justify-content: center; align-items: center; width: 4rem; height: 4rem; border: 1px solid var(--color-border); border-radius: .6rem; flex-shrink: 0; }
.icon-container.is-small { width: 3.2rem; height: 3.2rem; }
.icon-container.is-red { border-color: var(--color-red); color: var(--color-red); }