/*
 * Tille & Venelle — Badge Button widget
 *
 * Renders an <a> styled as a button with an optional decorative badge that
 * overflows one corner by half its own size. Colors and pill size are driven
 * by CSS custom properties emitted inline by the PHP component; padding and
 * border-radius are injected through Elementor `selectors`.
 *
 * Default padding (~12px vertical) keeps the button text clear of a 24px badge
 * that overflows the corner by 12px. Larger badges may require more padding.
 */

.tv-badge-button {
    --tv-bb-bg:         var(--tv-color-green, #66A386);
    --tv-bb-text:       var(--tv-color-white, #FFFFFF);
    --tv-bb-hover-bg:   var(--tv-color-green-dark, #315B47);
    --tv-bb-hover-text: var(--tv-color-white, #FFFFFF);
    --tv-bb-pill-bg:    var(--tv-color-coral, #EE7160);
    --tv-bb-pill-size:  24px;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--tv-bb-bg);
    color: var(--tv-bb-text);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.tv-badge-button:hover,
.tv-badge-button:focus,
.tv-badge-button:focus-visible {
    background-color: var(--tv-bb-hover-bg);
    color: var(--tv-bb-hover-text);
}

.tv-badge-button__text {
    display: inline-block;
    line-height: 1.2;
}

.tv-badge-button__pill {
    position: absolute;
    width: var(--tv-bb-pill-size);
    height: var(--tv-bb-pill-size);
    background-color: var(--tv-bb-pill-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tv-badge-button__pill--top-left {
    top:  calc(var(--tv-bb-pill-size) / -2);
    left: calc(var(--tv-bb-pill-size) / -2);
}

.tv-badge-button__pill--top-right {
    top:   calc(var(--tv-bb-pill-size) / -2);
    right: calc(var(--tv-bb-pill-size) / -2);
}

.tv-badge-button__pill--bottom-left {
    bottom: calc(var(--tv-bb-pill-size) / -2);
    left:   calc(var(--tv-bb-pill-size) / -2);
}

.tv-badge-button__pill--bottom-right {
    bottom: calc(var(--tv-bb-pill-size) / -2);
    right:  calc(var(--tv-bb-pill-size) / -2);
}

.tv-badge-button__pill-icon {
    display: block;
    width: 60%;
    height: 60%;
    object-fit: contain;
}