/*
Selector explanation:
.media--type-document .file a -> Targets embedded documents to standout on the page.

Also adds padding to bottom of full view media page.
*/
.media--view-mode-full {
  padding-bottom: var(--il-content-margin);
  .media--type-document .file a {
    font-size: 1.1em;
  }
}

/*
Overrides display flex from bootstrap attached to the .media class, as it conflicts with the responsive styles.
Includes styles to work around feature video paragraph using the display flex in its layout.

Selector explanations
.field--type-text-with-summary > .media -> For embedded items in a rich text body
.media.media--view-mode-full -> for the full media view page
*/
.media.media--view-mode-full,
.field--type-text-with-summary > .media {
  display: block;
}

/*
This whole section is to make responsive video embeds described here: https://avexdesigns.com/blog/responsive-youtube-embed

Selector explanations
.field--type-text-with-summary .media--type-remote-video -> for remote videos embedded in the feature video paragraph body, higher specificity.
.media--view-mode-full -> for full page view of remote videos
.field--type-text-with-summary -> for a remote video embedded in a rich text body

Includes high specificity to get around styling for the feature video paragraph itself and not affect that layout.

TODO: Consider making the feature video styles use this responsive video setup.
*/
.field--type-text-with-summary,
.media--view-mode-full,
.field--type-text-with-summary .media--type-remote-video {
  .field--name-field-media-oembed-video {
    position: relative;
    padding-bottom: 56%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
  }

  .field--name-field-media-oembed-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
/* for feature video paragraph type in toolkit 3*/
.field--name-field-media-oembed-video {
  position: relative;
  padding-bottom: 56%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.field--name-field-media-oembed-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*Styles for right and left align media*/
figure,
.media,
.media--type-remote-video,
.media--type-mediaspace-illinois {

  &.align-left,
  &.align-right {
    padding: 1rem 0;
    max-width: 60%;
    }

  &.align-left {
    margin: 0;
    @media (min-width: 600px) {
      margin: 0 1rem 0 0;
    }
  }

  &.align-right {
    margin: 0;
    @media (min-width: 600px) {
      margin: 1rem 0 0 1rem;
    }
  }

  &.align-center {
    clear: both;
    display: block;
    margin: 0.888889em auto 0;
    max-width: fit-content;

    img {
      width: 100%;
    }
  }

  figcaption{
    margin: 0.3125rem 0 !important;
    border-bottom: none !important;
    box-sizing: border-box;
    font-size: .7777777778em;
    font-weight: 400;
    line-height: 1.6428571429em;
  }
}

/* Override figure with caption display*/
figure{
    &.caption-drupal-media{
      display: block !important;
    }
}

/* Remove top margin for embedded image if it's the first element in the body */
div.field--type-text-with-summary > figure:first-child {
  margin-top: 0;
}

/* Without this, left and right aligned remote media will not show up */
.media.media--type-remote-video
.media.media--type-mediaspace-illinois {
  width: 100%;
}

/*Sets width for media view modes*/
.media--view-mode-small-250 {
  max-width: 250px;
  + figcaption{
    max-width: 250px;
  }

  &.media--type-remote-video,
  &.media--type-mediaspace-illinois {
    min-width: 250px;
  }
}

.media--view-mode-portrait{
  max-width: 250px;
  + figcaption,
  .field--name-field-if-media-image-caption{
    max-width: 250px;
  }

  &.media--type-remote-video,
  &.media--type-mediaspace-illinois {
    min-width: 250px;
  }
}

.media--view-mode-square{
  max-width: 300px;
  + figcaption,
  .field--name-field-if-media-image-caption{
    max-width: 300px;
  }

  &.media--type-remote-video,
  &.media--type-mediaspace-illinois {
    min-width: 300px;
  }
}

.media--view-mode-medium-400{
  max-width: 400px;
  + figcaption,
  .field--name-field-if-media-image-caption{
    max-width: 400px;
  }

  &.media--type-remote-video,
  &.media--type-mediaspace-illinois {
    min-width: 400px;
  }
}

.media--view-mode-large-600px{
  max-width: 600px;
  + figcaption,
  .field--name-field-if-media-image-caption{
    max-width: 600px;
  }

  &.media--type-remote-video,
  &.media--type-mediaspace-illinois {
    min-width: 600px;
  }
}

/*Styles for media with Media captions*/
.field--name-field-if-media-image-caption{
  .field__item{
    box-sizing: border-box;
    font-size: .7777777778em;
    font-weight: 400;
    line-height: 1.6428571429em;
  }
}