.skross-btn{color:inherit;display:inline-flex;justify-content:center;align-items:center;border:0;cursor:pointer;background-color:initial;transition:all .3s ease;gap:5px}.btn--primary{background-color:var(--skross-primary-color);color:var(--skross-white-color);border-radius:var(--skross-border-radius);padding:15px 25px;transition:all .8s ease}.btn--white{background-color:var(--skross-white-color);color:var(--skross-black-color);border-radius:var(--skross-border-radius);padding:15px 25px;transition:all .8s ease}.btn--black{background-color:var(--skross-black-color);color:var(--skross-white-color);border-radius:var(--skross-border-radius);padding:15px 25px;transition:all .8s ease}.btn--search{background-color:var(--skross-grey-color);color:var(--skross-black-color);border-radius:var(--skross-border-radius);padding:20px;transition:all .5s ease;color:var(--skross-black-color);&:hover { background-color:var(--skross-primary-color); color:var(--skross-white-color); }}.btn--search-bread{background-color:var(--skross-white-color);color:var(--skross-black-color);border-radius:var(--skross-border-radius);border:1px solid var(--skross-black-color);padding:20px;transition:all .5s ease;color:var(--skross-black-color);&:hover { background-color:var(--skross-black-color); color:var(--skross-white-color); }}.btn-start{display:flex;flex-direction:column;width:fit-content;border-radius:50%;padding:30px 20px}.btn--filter{background-color:var(--skross-primary-color);color:var(--skross-white-color);border-radius:var(--skross-border-radius);padding:20px;transition:all .8s ease}.btn--outline{background-color:initial;color:var(--skross-black-color);border:2px solid var(--skross-black-color);border-radius:var(--skross-border-radius);padding:20px;transition:all .8s ease;&:hover { background-color:var(--skross-lightgrey-color); }}.btn-input{background-color:var(--skross-black-color);color:var(--skross-white-color);border:1px solid var(--skross-grey-color);padding:15px 25px;transition:all .8s ease;& .icon { width: 15px; height: 15px; } &:hover { background-color: #d2d2d2; }}.btn-overlay{width:100%;display:flex;justify-content:start;gap:10px;padding:10px 14px;align-items:center;border-radius:15px 0;background-color:var(--skross-white-color);transition:background-color .6s ease;&:hover { background-color:var(--skross-grey-color); }}.skross-btn-icon-only{padding:10px;border-radius:15px}.btn-power-gift{display:flex;justify-content:center;align-items:center;background-color:var(--skross-primary-color);color:var(--skross-white-color);border-radius:var(--skross-border-radius);padding:40px 30px;transition:all .6s ease;gap:20px;&:hover { background-color:var(--skross-black-color); } & .title { font-size:3.2rem; font-weight:700; text-wrap:nowrap; } & .slogan { font-size:1.6rem; font-weight:300; }}.favorite,.owned{background-color:var(--skross-white-color);color:var(--skross-black-color);border-radius:var(--skross-border-radius);transition:all .8s ease;&.active { background-color: var(--skross-white-color); color: var(--skross-white-color); & .icon svg { fill: var(--skross-primary-color); stroke: var(--skross-primary-color); } }}.skross--filter-item{display:flex;padding:20px 40px;align-items:flex-start;border-radius:25px;color:var(--skross-black-color);background-color:var(--skross-grey-color);transition:all .3s ease;cursor:pointer;font-size:1.6rem;font-weight:600;text-transform:capitalize;&.active { background: var(--skross-black-color, #000); color: var(--skross-white-color); } &:hover { background: var(--skross-black-color, #000); color: var(--skross-white-color); } &:hover a { color: var(--skross-white-color); }}