// Embedded content
//
// Weight: 8
//
// Style guide: base.embedded

// Images
//
// An `<img>` element represents an image.
// We are using the following image styles in Drupal. You can use devtools to inspect images.
//
// <div class="tables-start"></div>
//
// | Name | Sizes | Effects| Example
// |------|---|---|---|
// | Social extra extra large | 1200 x 423 | Scale & crop |	Hero background
// | Social extra large | 220 x 220 |	Scale & crop | Event teaser
// | Social large |128 x 128 | Scale & crop |	Profile image
// | Social medium | 44 x 44 | Scale & crop	| Stream avatar
// | Social small | 24 x 24 |	Scale & crop | Newest members listd
// <div class="tables-end"></div>
//
// Markup: embedded-img.twig
//
// Style guide: base.embedded.img

// Scalable vector
//
// A `<svg>` element represents an image encoded as a Scalable Vector Graphic.
//
// Markup: embedded-svg.twig
//
// Style guide: base.embedded.svg

img {
  // Remove the border on images inside links in IE <11.
  border-style: none;
  vertical-align: middle;
  // Responsive images
  max-width: 100%;
  height: auto;
}

svg:not(:root) {
  // Hide the overflow in IE.
  overflow: hidden;
}

//
// Alignment of Figures and limiting
// captions to the width of their images
//

figure {
  margin: 0;
  padding-bottom: 0.5rem;
  display: table;

  img {
    line-height: 1;
  }

  figcaption {
    font-size: 90%;
    color: $gray-light;
    text-align: center;
    display: table-caption;
    caption-side: bottom;
    margin-top: 5px;
    word-break: break-word;
  }

  &.align-right {
    float: right;
    padding-top: 0.1rem;
    padding-left: 1rem;

    figcaption {
      padding-left: 1rem;
    }
  }

  &.align-left {
    float: left;
    padding-top: 0.1rem;
    padding-right: 1rem;

    figcaption {
      padding-right: 1rem;
    }
  }

  &.align-center {
    margin-right: auto;
    margin-left: auto;
  }

  @include for-phone-only {
    &.align-left,
    &.align-right,
    &.align-center {
      float: none;
      width: 100%;
      text-align: center;
      padding: 0;
      margin-bottom: 1rem;

      figcaption {
        padding: 0;
      }
    }
  }

}

.embed-responsive {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 0;

  &::before {
    display: block;
    content: '';
  }

  .embed-responsive-item,
  iframe,
  embed,
  object,
  video {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    border: 0;
    width: 100%;
    height: 100%;
  }

  + p {
    margin-top: 0.75rem;
  }

}

.embed-responsive-16by9::before {
  padding-top: 56.25%;
}

.embed-responsive-4by3::before {
  padding-top: 75%;
}

.embed-responsive-1by1::before {
  padding-top: 100%;
}

.embed-responsive-21by9::before {
  padding-top: calc((9/21)*100%);
}

iframe {
  max-width: 100%;

  &[src*='youtube.com'],
  &[data-src*='youtube.com'] {
    height: 400px;
    width: 100%;

    @include for-phone-only {
      height: 300px;
    }
  }
}

p > iframe {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
