.$_el.x-frame {
  @if $frame_width !== 'auto' {
    width: $frame_width;
  }
  @unless $frame_max_width?? {
    max-width: $frame_max_width;
  }
  @unless $frame_margin?? {
    margin: $frame_margin;
  }
  @unless $frame_border_width?? || $frame_border_style?? {
    border-width: $frame_border_width;
    border-style: $frame_border_style;
    border-color: $frame_border_color;
  }
  @unless $frame_border_radius?? {
    border-radius: $frame_border_radius;
  }
  @unless $frame_padding?? {
    padding: $frame_padding;
  }
  font-size: $frame_base_font_size;
  @if $frame_bg_color !== 'transparent' {
    background-color: $frame_bg_color;
  }
  @unless $frame_box_shadow_dimensions?? {
    @if $frame_box_shadow_color === 'transparent' {
      box-shadow: none;
    }
    @if $frame_box_shadow_color !== 'transparent' {
      box-shadow: $frame_box_shadow_dimensions $frame_box_shadow_color;
    }
  }
}

.$_el .x-frame-inner {
  @if $frame_content_sizing === 'fixed-height' {
    padding-bottom: $frame_content_height;
  }
  @if $frame_content_sizing === 'aspect-ratio' {
    padding-bottom: calc(($frame_content_aspect_ratio_height / $frame_content_aspect_ratio_width) * 100%);
  }
}
.$_el .x-mejs .mejs-controls {
  @if $mejs_type === 'video' {
    margin: $mejs_controls_margin;
  }
  @unless $mejs_controls_border_width?? || $mejs_controls_border_style?? {
    border-width: $mejs_controls_border_width;
    border-style: $mejs_controls_border_style;
    border-color: $mejs_controls_border_color;
  }
  @unless $mejs_controls_border_radius?? {
    border-radius: $mejs_controls_border_radius;
  }
  @unless $mejs_controls_padding?? {
    padding: $mejs_controls_padding;
  }
  background-color: $mejs_controls_bg_color;
  @unless $mejs_controls_box_shadow_dimensions?? {
    box-shadow: $mejs_controls_box_shadow_dimensions $mejs_controls_box_shadow_color;
  }
}

.$_el .x-mejs .mejs-button button {
  color: $mejs_controls_button_color;
}

.$_el .x-mejs .mejs-button button:hover,
.$_el .x-mejs .mejs-button button:focus {
  color: $mejs_controls_button_color_alt;
}

.$_el .x-mejs .mejs-time-total {
  @unless $mejs_controls_border_radius?? {
    border-radius: $mejs_controls_time_rail_border_radius;
  }
  background-color: $mejs_controls_time_total_bg_color;
  @unless $mejs_controls_time_rail_box_shadow_dimensions?? {
    box-shadow: $mejs_controls_time_rail_box_shadow_dimensions $mejs_controls_time_rail_box_shadow_color;
  }
}

.$_el .x-mejs .mejs-time-loaded {
  background-color: $mejs_controls_time_loaded_bg_color;
}

.$_el .x-mejs .mejs-time-current {
  background-color: $mejs_controls_time_current_bg_color;
}

.$_el .x-mejs .mejs-time {
  color: $mejs_controls_color;
}