/**
 * 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_video {
    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_video_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;

    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;

    padding: 2px 8px;

    background: #cc0000;
    color: #ffffff;

    border-radius: 3px;

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


.mbox .mbox_video .mbox_button:hover,
.mbox .mbox_video .mbox_button:focus,
.mbox .mbox_video .mbox_button:active {

    background: #cc0000;
    color: #cccccc;
    text-decoration: none;
}

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

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


/* Audio */

.mbox_audio_player {
    height: 22px;
    width: 180px;

    vertical-align: middle;

    overflow: hidden;
}


/* Browser-spezifische Audio-Anpassungen */

.mbox_audio_player::-webkit-media-controls-panel {
    height: 22px;
    padding: 0;
}


.mbox_audio_player::-webkit-media-controls-enclosure {
    height: 22px;
}