/**
 * WP Isolated Ad Inserter - Frontend Styles
 */

.wp-isolated-ad-wrapper {
  position: relative;
  display: block;
  box-sizing: border-box;
  clear: both;
  max-width: 100%;
}

/* Alignment Classes */
.wp-isolated-ad-wrapper.wp-ad-align-center {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
  clear: both;
}

.wp-isolated-ad-wrapper.wp-ad-align-left {
  float: left;
  margin-right: 24px !important;
  margin-bottom: 20px !important;
}

.wp-isolated-ad-wrapper.wp-ad-align-right {
  float: right;
  margin-left: 24px !important;
  margin-bottom: 20px !important;
}

.wp-isolated-ad-wrapper.wp-ad-align-none {
  float: none;
}

/* Clearfix for floated ad wrappers */
.wp-isolated-ad-wrapper::after {
  content: "";
  display: table;
  clear: both;
}

/* Host Web Component */
wp-isolated-ad {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

/* Sandboxed Iframe */
.wp-isolated-ad-frame {
  max-width: 100%;
  border: 0;
  display: block;
  margin: 0 auto;
}

/* Mobile Responsiveness */
@media screen and (max-width: 768px) {
  .wp-isolated-ad-wrapper.wp-ad-align-left,
  .wp-isolated-ad-wrapper.wp-ad-align-right {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
  }
}