@layer components{.socials-list{--item-color: var(--main-color-2);--item-hover-color: var(--white);--item-bg-color: transparent;--item-bg-hover-color: transparent;--item-border-color: var(--main-color-2);--item-border-hover-color: var(--main-color-2);--card-background: var(--grey-1);display:flex;flex-wrap:wrap;align-items:center;gap:10px}.socials-list svg{width:32px}.socials-list.card{padding:20px;background-color:var(--card-background);border-radius:var(--card-radius)}.socials-list.round{--item-bg-hover-color: var(--item-color)}.socials-list.round a{border-radius:100%}.socials-list a{display:inline-flex;align-items:center;justify-content:center;color:var(--item-color);background-color:var(--item-bg-color);transition:color var(--transition),background-color var(--transition)}.socials-list a:not([disabled]):active{color:var(--item-hover-color);border-color:var(--item-border-hover-color)}@media(hover: hover){.socials-list a:not([disabled]):hover{color:var(--item-hover-color);border-color:var(--item-border-hover-color)}}}