/**
 * MediaBox – Core Component
 *
 * Enthält ausschließlich die Darstellung der MediaBox selbst.
 * Keine Theme- oder Builder-spezifischen Regeln.
 */


/* ----------------------------------------------------
   1) Hauptkomponente
---------------------------------------------------- */

.mbox {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* ----------------------------------------------------
   1.1) Ausgabe-Kontext
---------------------------------------------------- */

.mbox--inline {
    display: inline-flex;
    align-items: center;
}

.mbox--block {
    display: flex;
    align-items: center;
}

/* ----------------------------------------------------
   1.2) Block-Abstand
---------------------------------------------------- */

.mbox--block {
    margin-bottom: 20px;
}

/* ----------------------------------------------------
   2) Mediencontainer
---------------------------------------------------- */

.mbox_media {
    display: inline-flex;
    align-items: center;
}


/* Einzelne Medientypen */

.mbox_audio,
.mbox_button {
    display: inline-flex;
    align-items: center;
}


/* ----------------------------------------------------
   3) Labels
---------------------------------------------------- */

.mbox_label {
    display: inline-flex;
    align-items: center;

    margin-right: 6px;

    font-size: 14px;
    line-height: 1.3;
    font-weight: 500;
}


/* Medienspezifische Labels */

.mbox_audio_label,
.mbox_button_label {
    display: inline-flex;
    align-items: center;
}


/* ----------------------------------------------------
   4) Interner Medientrenner
---------------------------------------------------- */

.mbox_media_separator {
    display: inline-flex;
    align-items: center;

    opacity: 0.7;

    margin-left: 6px;
    margin-right: 6px;
}


/* ----------------------------------------------------
   5) Buttons
---------------------------------------------------- */

.mbox_button,
.mbox_button:link,
.mbox_button:visited {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: var(--mediabox-normal-text-size, 14px);
    line-height: 1.3;
    font-weight: var(--mediabox-normal-text-weight, 400);
    font-style: var(--mediabox-normal-text-style, normal);

    /*
     * Ursprünglicher Idealwert:
     * height: 30px;
     *
     * Der Wert wird jetzt über die globalen
     * MediaBox Einstellungen gesteuert.
     */
    height: var(--mbox-button-height, 30px);
    box-sizing: border-box;

    /*
     * Ursprünglicher Idealwert:
     * padding: 2px 8px;
     *
     * Der Wert wird jetzt über die globalen
     * MediaBox Einstellungen gesteuert.
     */
    padding: var(--mbox-button-padding-vertical, 2px) var(--mbox-button-padding-horizontal, 8px);

    /*
     * Ursprünglicher Idealwert:
     * width: auto;
     *
     * Der Wert wird bei einer konfigurierten
     * Button-Breite über die globalen MediaBox
     * Einstellungen gesteuert.
     */
    width: var(--mbox-button-width, auto);

    background: var(--mediabox-normal-background-color, transparent);
    color: var(--mediabox-normal-text-color, #ffffff);
    border: var(--mbox-button-border-width, 1px) solid var(--mediabox-normal-border-color, transparent);
    /*
    * Ursprünglicher Idealwert:
    * border-radius: 3px;
    *
    * Der Wert wird jetzt über die globalen
    * MediaBox Einstellungen gesteuert.
    */
    border-radius: var(--mbox-button-border-radius, 3px);

    text-decoration: none;
    white-space: nowrap;
}


.mbox .mbox_button:hover,
.mbox .mbox_button:focus,
.mbox .mbox_button:active {
    background-color: var(--mediabox-hover-background-color,
            var(--mediabox-normal-background-color, transparent));

    color: var(--mediabox-hover-text-color,
            var(--mediabox-normal-text-color, #ffffff));

    font-size: var(--mediabox-hover-text-size,
            var(--mediabox-normal-text-size, 14px));

    font-weight: var(--mediabox-hover-text-weight,
            var(--mediabox-normal-text-weight, 400));

    font-style: var(--mediabox-hover-text-style,
            var(--mediabox-normal-text-style, normal));

    border-color: var(--mediabox-hover-border-color,
            var(--mediabox-normal-border-color, transparent));

    text-decoration: none;
}


.mbox .mbox_button_icon {
    color: var(--mediabox-normal-icon-color, inherit);

    font-size: var(--mediabox-normal-icon-size, 16px);

    margin-right: var(--mediabox-normal-icon-spacing, 6px);
}

.mbox .mbox_button:hover .mbox_button_icon,
.mbox .mbox_button:focus .mbox_button_icon,
.mbox .mbox_button:active .mbox_button_icon {
    color: var(--mediabox-hover-icon-color,
            var(--mediabox-normal-icon-color, inherit));
}

/* ----------------------------------------------------
   6) Player
---------------------------------------------------- */

.mbox_player {
    display: inline-block;

    vertical-align: middle;
}

/* Audio */

.mbox_audio {
    display: inline-flex;
    align-items: center;
}

.mbox_audio_player {
    display: block;
    height: calc(var(--mbox-button-height, 30px) + 4px);
    margin: 0;
}