/** Cards **/
.vlx-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); }
.vlx-card .vlx-card__header { --p: 0; padding: var(--p); }
.vlx-card .vlx-card__header img { width: 100%; height: 100%; object-fit: cover; border-top-right-radius: var(--br); border-top-left-radius: var(--br); }
.vlx-card .vlx-card__body { --p: 8px 16px 8px; padding: var(--p); }
.vlx-card .vlx-card__body:last-child { --p: 8px 16px 16px; }
.vlx-card .vlx-card__body:first-child { --p: 16px 16px 8px; }
.vlx-card .vlx-card__body:first-child:last-child { --p: 16px 16px 16px; }
.vlx-card .vlx-card__footer { --p: 8px 16px 16px; padding: var(--p); }


/** Cards > Site **/
.vlx-card--site { position: relative; }
.vlx-card--site .btn-group-small { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; }
.vlx-card--site .vlx-like:not(.--active) { opacity: 0; pointer-events: none; }
.vlx-card--site .btn--icon { opacity: 0; pointer-events: none; box-shadow: var(--box-shadow); }
.vlx-card--site .vlx-card__header { position: relative; display: grid; place-content: center; height: fit-content !important; background-color: var(--bg-clr-dark); padding: 32px 64px; border-radius: var(--br-large); }
.vlx-card--site .vlx-card__header img { object-fit: contain; height: 128px; width: 100%; transition: transform var(--timing); }
.vlx-card--site .label-group { position: absolute; top: 16px; left: 16px; display: flex; gap: 8px; }
.vlx-card--site .vlx-card__body { --p: 8px 16px 8px !important; }
.vlx-card--site .btn--icon { --clr-bg: var(--bg-clr); }

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


/** Cards > Resource **/
.vlx-card--resource { position: relative; }
.vlx-card--resource .btn-group-small { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; }
.vlx-card--resource .vlx-like:not(.--active) { opacity: 0; pointer-events: none; }
.vlx-card--resource .btn--icon { opacity: 0; pointer-events: none; box-shadow: var(--box-shadow); }
.vlx-card--resource .vlx-card__header { position: relative; display: grid; place-content: center; width: 100%; aspect-ratio: 16/9; overflow: hidden; background-color: var(--bg-clr-dark); border-radius: var(--br); }
.vlx-card--resource .vlx-card__header img { border-radius: var(--br); object-fit: contain; width: 100%; aspect-ratio: 16/9; transition: transform var(--timing); }
.vlx-card--resource .label-group { position: absolute; top: 16px; left: 16px; display: flex; gap: 8px; }
.vlx-card--resource .vlx-card__body { --p: 8px 16px 8px !important; }
.vlx-card--resource .btn--icon { --clr-bg: var(--bg-clr); }

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


/** Cards > User **/
.vlx-card--user { --p: 0 !important; display: flex; gap: 16px; justify-content: space-between; align-items: center; }
.vlx-card--user .vlx-card__body { --p: 0 !important; display: flex; gap: 8px; align-self: center; }
.vlx-card--user .vlx-card__footer { --p: 0 !important; }
.vlx-card--user .vlx-card__avatar { width: 48px; height: 48px; border-radius: var(--br-small); background-color: var(--bg-clr-dark); display: grid; place-content: center; }
.vlx-card--user .vlx-card__avatar img { width: 100%; height: 100%; border-radius: var(--br-small); }
.vlx-card--user .vlx-card__avatar i { font-size: 24px; color: var(--text-clr-light); }
.vlx-card--user .vlx-card__footer .btn { position: unset !important; width: 48px; aspect-ratio: 1/1; --padding: 0; display: grid; place-content: center; }
.vlx-card--user .vlx-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 > Auth **/
.vlx-card--auth { border: unset !important; background: var(--bg-clr-dark); display: flex; flex-direction: column; border-radius: var(--br); }
.vlx-card--auth .vlx-card__header { display: flex; justify-content: center; --p: 32px 32px 16px 32px; }
.vlx-card--auth .vlx-card__body { --p: 16px 32px 16px 32px; }
.vlx-card--auth .vlx-card__footer { --p: 16px 32px 32px 32px; }

.vlx-card--auth .vlx-card__header .logo { height: 50px; width: 100%; object-fit: contain; }
.vlx-card--auth .input-wrapper { background: var(--bg-clr); padding: 8px 16px; display: flex; flex-direction: column; gap: 4px; border-radius: var(--br); color: #4d4d4d; }
.vlx-card--auth .input-wrapper:not(:first-child) { margin-top: 16px; }
.vlx-card--auth .input-wrapper label { --fs: 14px; color: var(--text-clr-dark); }
.vlx-card--auth .input-wrapper input { outline: none; border: none; color: var(--text-clr-dark); background-color: transparent; }
.vlx-card--auth .input-wrapper .vlx-icon { --clr: var(--text-clr-dark); margin-bottom: -2px; }
.vlx-card--auth .btn-group { margin-top: unset !important; }
.vlx-card--auth .btn-group .btn { width: 100%; }

.vlx-card--auth .password .show-hide { margin-right: -8px; }

.vlx-card--auth .vlx-card__footer .vlx-btn-bar { display: flex; align-items: center; flex-direction: column; gap: 16px; margin-top: 16px; }
.vlx-card--auth .vlx-card__footer .vlx-btn-bar > * { cursor: pointer; --fs: 14px; color: var(--text-clr-dark); text-decoration: unset; }