.skross-badge{color:inherit;display:inline-flex;justify-content:center;align-items:center;border:0;cursor:pointer;background-color:initial;transition:all .3s ease;padding:1em 2em;&.badge--product-cat { background-color: var(--skross-grey-color); color: var(--skross-black-color); border-radius: var(--skross-border-radius); padding: 12px 18px; transition: all 0.8s ease; font-size: 1.2rem; font-weight: 700; text-transform: uppercase; &:hover { background-color: var(--skross-white-color); color: var(--skross-primary-color); } } &.badge--primary { background-color: var(--skross-primary-color); color: var(--skross-white-color); border-radius: var(--skross-border-radius); padding: 15px 25px; transition: all 0.8s ease; &:hover { background-color: var(--skross-white-color); color: var(--skross-primary-color); } } &.badge--product-info { background-color: var(--skross-whtie-color); color: var(--skross-black-color); border-radius: 8px; font-size: 1.6rem; padding: 0px 0px; transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center; gap: 15px; margin-top: 0px; flex: 0 1 185px; & .element-name { font-weight: 600; font-size: 1.2rem; background-color: var(--skross-grey-color); padding: 1em; border-radius: 8px; text-align: center; } & .icon { width: 60px; height: 60px; } } &.badge-document { background-color: var(--skross-grey-color); border-radius: 8px; padding: .8em .8em; }}