/* ==========================================================================
   Buttons Component
   Reusable button primitives and the responsive action-button group.
   ========================================================================== */

/* Shared button group primitive for plugin controls. */
:where(.mehrazi-player, .mp-video-player) .mp-btn-group {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--mp-space-2);
    min-inline-size: 0;
    max-inline-size: 100%;
    direction: inherit;
}

/* Mobile-first action group uses available width and wraps safely. */
:where(.mehrazi-player, .mp-video-player) .mp-btn-group--actions {
    inline-size: 100%;
    justify-content: flex-start;
}

/* Base button primitive for both <button> and <a>. */
:where(.mehrazi-player, .mp-video-player) .mp-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mp-space-1);
    min-block-size: var(--mp-touch-target);
    min-inline-size: var(--mp-touch-target);
    padding-block: var(--mp-space-2);
    padding-inline: var(--mp-space-2);
    border: 1px solid var(--mp-control-btn-border, rgba(248, 250, 252, 0.24));
    border-radius: var(--mp-btn-radius-lg, 12px);
    background: var(--mp-control-btn-bg, rgba(2, 6, 23, 0.74));
    color: var(--mp-control-btn-color-muted, var(--mp-btn-icon, #f8fafc));
    box-shadow: var(--mp-control-btn-shadow, 0 8px 20px rgba(2, 6, 23, 0.28));
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: normal;
    overflow-wrap: anywhere;
    max-inline-size: 100%;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

/* Size variants for reuse beyond action icons. */
:where(.mehrazi-player, .mp-video-player) .mp-btn--sm {
    min-block-size: 36px;
    min-inline-size: 36px;
    padding-block: 0.375rem;
    padding-inline: 0.5rem;
}

:where(.mehrazi-player, .mp-video-player) .mp-btn--md {
    min-block-size: var(--mp-touch-target);
    min-inline-size: var(--mp-touch-target);
}

:where(.mehrazi-player, .mp-video-player) .mp-btn--lg {
    min-block-size: 52px;
    min-inline-size: 52px;
    padding-block: 0.625rem;
    padding-inline: 0.75rem;
}

/* Touch and pointer feedback. */
:where(.mehrazi-player, .mp-video-player) .mp-btn:hover {
    background: var(--mp-control-btn-bg-hover, rgba(15, 23, 42, 0.94));
    border-color: var(--mp-control-btn-border-hover, rgba(212, 175, 55, 0.86));
    color: var(--mp-control-btn-color, #f8fafc);
}

:where(.mehrazi-player, .mp-video-player) .mp-btn:active {
    transform: scale(0.96);
}

/* State variants for consistent behavior across controls. */
:where(.mehrazi-player, .mp-video-player) .mp-btn.is-active,
:where(.mehrazi-player, .mp-video-player) .mp-btn[aria-pressed="true"] {
    color: var(--mp-control-btn-color, #f8fafc);
    border-color: var(--mp-primary, #d4af37);
    background: rgba(212, 175, 55, 0.2);
}

:where(.mehrazi-player, .mp-video-player) .mp-btn.is-disabled,
:where(.mehrazi-player, .mp-video-player) .mp-btn[aria-disabled="true"],
:where(.mehrazi-player, .mp-video-player) .mp-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Keyboard focus ring aligned with WCAG-visible focus expectations. */
:where(.mehrazi-player, .mp-video-player) .mp-btn:focus-visible {
    outline: 2px solid var(--mp-primary, #d4af37);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--mp-focus-ring-color);
}

/* Icon sizing remains stable even if button labels are introduced later. */
:where(.mehrazi-player, .mp-video-player) .mp-btn .mp-icon {
    inline-size: 1rem;
    block-size: 1rem;
    flex: 0 0 auto;
}

/* Optional text label utility for future labeled action variants. */
:where(.mehrazi-player, .mp-video-player) .mp-btn__label {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Icon-only mode keeps padding balanced and compact. */
:where(.mehrazi-player, .mp-video-player) .mp-btn--icon-only {
    padding-inline: var(--mp-space-2);
}

/* Mobile-first action layout: one per row to guarantee no clipping. */
:where(.mehrazi-player, .mp-video-player) .mp-btn-group--actions > .mp-btn {
    flex: 1 1 100%;
    inline-size: 100%;
    max-inline-size: 100%;
}

/* Preserve heart icon toggling without inline styles. */
:where(.mehrazi-player, .mp-video-player) .mp-like-toggle .mp-icon-heart-filled {
    display: none;
}

:where(.mehrazi-player, .mp-video-player) .mp-like-toggle.is-liked .mp-icon-heart-empty {
    display: none;
}

:where(.mehrazi-player, .mp-video-player) .mp-like-toggle.is-liked .mp-icon-heart-filled {
    display: block;
}

/* Override legacy video button hard-coding with component-specific intent. */
.mp-video-player .mp-btn-group--actions > button.mp-btn {
    width: auto !important;
    height: auto !important;
    min-width: var(--mp-touch-target) !important;
    min-height: var(--mp-touch-target) !important;
}