/* ==========================================================
   dimosTV Design System
   DS2.1 — Icons
========================================================== */

.dtv-icon {
    display: inline-block;

    width: 1em;
    height: 1em;

    flex: 0 0 auto;

    color: currentColor;

    fill: currentColor;

    vertical-align: -0.125em;

    pointer-events: none;
}

.dtv-icon--xs {
    width: 12px;
    height: 12px;
}

.dtv-icon--sm {
    width: 14px;
    height: 14px;
}

.dtv-icon--md {
    width: 18px;
    height: 18px;
}

.dtv-icon--lg {
    width: 22px;
    height: 22px;
}

.dtv-icon--xl {
    width: 28px;
    height: 28px;
}

.dtv-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border-radius: var(--dtv-radius-pill);

    color: inherit;
}

.dtv-icon-wrap--light {
    background: rgba(255,255,255,.94);
    color: var(--dtv-color-primary);
    box-shadow: var(--dtv-shadow-control);
}

.dtv-icon-wrap--dark {
    background: rgba(15,23,42,.84);
    color: var(--dtv-color-text-inverse);
    box-shadow: var(--dtv-shadow-control);
}

.dtv-icon-wrap--primary {
    background: var(--dtv-color-primary);
    color: var(--dtv-color-text-inverse);
    box-shadow: 0 14px 36px rgba(204,0,0,.28);
}

/* WordPress emoji replacement guard */
.dtv-icon img.emoji,
.dtv-icon-wrap img.emoji,
.dtv-video-card__play img.emoji,
.dtv-continue-card__play img.emoji,
.dtv-live-strip__watch img.emoji,
.dtv-front-hero-cta img.emoji {
    display: none !important;
}