/** Cards **/
.wux-card { --card-bg: var(--bg-clr-light); position: relative; background-color: var(--card-bg); border-radius: var(--br); box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); transition: transform var(--timing), box-shadow var(--timing); }
.wux-card .wux-card__header { --p: 0; padding: var(--p); }
.wux-card .wux-card__header img { width: 100%; height: 100%; object-fit: cover; border-top-right-radius: var(--br); border-top-left-radius: var(--br); }
.wux-card .wux-card__body { --p: 8px 16px 8px; padding: var(--p); }
.wux-card .wux-card__body:last-child { --p: 8px 16px 16px; }
.wux-card .wux-card__body:first-child { --p: 16px 16px 8px; }
.wux-card .wux-card__body:first-child:last-child { --p: 16px 16px 16px; }
.wux-card .wux-card__footer { --p: 8px 16px 16px; padding: var(--p); }


/** Cards > Site **/
.wux-card--site { position: relative; }
.wux-card--site .btn-group-small { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; }
.wux-card--site .wux-card__header { position: relative; overflow: hidden; display: grid; place-content: center; height: fit-content !important; background-color: var(--bg-clr-dark); padding: 48px; border-radius: var(--br-large); }
.wux-card--site .label-group { position: absolute; top: 16px; left: 16px; display: flex; gap: 8px; }
.wux-card--site .wux-card__body { --p: 20px 0 0 0 !important; }

.wux-card--site .wux-card__header img { border-radius: var(--br); width: 100%; max-width: 250px; aspect-ratio: 14/9; transition: transform var(--timing); }
.wux-card--site .btn--icon { opacity: 0; pointer-events: none; box-shadow: var(--box-shadow); border-radius: 8px; }
.wux-card--site .wux-like.--active { opacity: 1; pointer-events: all; }

.wux-card--site:hover .wux-card__header img { transform: scale(1.1); }
.wux-card--site:hover .wux-like { opacity: 1; pointer-events: all; }
.wux-card--site:hover .btn--icon { opacity: 1; pointer-events: all; }

.wux-card--site-large .wux-card__header img { max-width: 400px; }


/** Cards > Element **/
.wux-card--element { position: relative; }
.wux-card--element .btn-group-small { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; }
.wux-card--element .wux-card__header { position: relative; overflow: hidden; display: grid; place-content: center; height: fit-content !important; background-color: var(--bg-clr-dark); padding: 48px; border-radius: var(--br-large); }
.wux-card--element .label-group { position: absolute; top: 16px; left: 16px; display: flex; gap: 8px; }
.wux-card--element .wux-card__body { --p: 20px 0 0 0 !important; }

.wux-card--element .wux-card__header img { border-radius: var(--br); width: 100%; max-width: 250px; aspect-ratio: 14/9; transition: transform var(--timing); }
.wux-card--element .btn--icon { opacity: 0; pointer-events: none; box-shadow: var(--box-shadow); border-radius: 8px; }
.wux-card--element .wux-like.--active { opacity: 1; pointer-events: all; }

.wux-card--element:hover .wux-card__header img { transform: scale(1.1); }
.wux-card--element:hover .wux-like { opacity: 1; pointer-events: all; }
.wux-card--element:hover .btn--icon { opacity: 1; pointer-events: all; }

.wux-card--element-large .wux-card__header img { max-width: 400px; }

.wux-card--element-full .wux-card__header { padding: unset; }
.wux-card--element-full .wux-card__header img { padding: unset; max-width: unset; }


/** Cards > User **/
.wux-card--user { --p: 0 !important; display: flex; gap: 16px; justify-content: space-between; align-items: center; }
.wux-card--user .wux-card__body { --p: 0 !important; display: flex; gap: 16px; align-self: center; }
.wux-card--user .wux-card__footer { --p: 0 !important; }

.wux-card--user .wux-card__avatar { width: 48px; height: 48px; border-radius: var(--br-small); background-color: var(--bg-clr-dark); display: grid; place-content: center; }
.wux-card--user .wux-card__avatar img { width: 100%; height: 100%; border-radius: var(--br-small); }
.wux-card--user .wux-card__avatar i { font-size: 24px; color: var(--text-clr-light); }

.wux-card--user .wux-card__content { display: flex; gap: 8px; align-items: center; }

.wux-card--user .wux-card__footer .btn { position: unset !important; width: 48px; aspect-ratio: 1/1; --padding: 0; display: grid; place-content: center; }
.wux-card--user .wux-card__footer .btn::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: var(--br-small); background-color: var(--bg-clr-dark); opacity: 0; transition: opacity var(--timing); }


/** Cards > Label **/
.wux-card--label { --p: 0 !important; display: flex; gap: 16px; justify-content: space-between; align-items: center; }
.wux-card--label .wux-card__body { --p: 0 !important; display: flex; gap: 16px; align-self: center; }
.wux-card--label .wux-card__footer { --p: 0 !important; }

.wux-card--label .wux-card__content { display: flex; gap: 16px; align-items: center; }

.wux-card--label .wux-card__footer .btn { position: unset !important; width: 48px; aspect-ratio: 1/1; --padding: 0; display: grid; place-content: center; }
.wux-card--label .wux-card__footer .btn::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: var(--br-small); background-color: var(--bg-clr-dark); opacity: 0; transition: opacity var(--timing); }


/** Cards > Category **/
.wux-card--category { --p: 0 !important; display: flex; gap: 16px; justify-content: space-between; align-items: center; }
.wux-card--category .wux-card__body { --p: 0 !important; display: flex; gap: 16px; align-self: center; }
.wux-card--category .wux-card__footer { --p: 0 !important; }

.wux-card--category .wux-card__content { display: flex; gap: 16px; align-items: center; }

.wux-card--category .wux-card__footer .btn { position: unset !important; width: 48px; aspect-ratio: 1/1; --padding: 0; display: grid; place-content: center; }
.wux-card--category .wux-card__footer .btn::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: var(--br-small); background-color: var(--bg-clr-dark); opacity: 0; transition: opacity var(--timing); }


/** Cards > Search **/
.wux-card--search { --card-bg: transparent; display: flex; gap: 16px; }
.wux-card--search .wux-card__body { padding: unset !important; display: flex; flex-direction: column; justify-content: center; }
.wux-card--search .wux-card__title { --fs: 20px; }
.wux-card--search .wux-card__description { opacity: 0.6; }
.wux-card--search .wux-card__icon { background-color: var(--bg-clr-invert-light); width: 48px; height: 48px; border-radius: var(--br-small); display: grid; place-content: center; }
.wux-card--search .wux-card__icon img { height: 40px; border-radius: var(--br-small); }
.wux-card--search .wux-card__icon i { --h: 24px; }


/** Cards > Login **/
.wux-card--login { --card-bg: transparent; }
.wux-card--login .wux-card__body { --p: 0 !important; display: flex; flex-direction: column; align-items: center; gap: 16px; }

.wux-card--login:hover { box-shadow: unset; transform: unset !important; }