/**
* @file
* Media element styles.
*/

img {
  max-width: 100%;
  height: auto;
  display: block;
  //background: radial-gradient(circle, rgba($darkblue, 0.1) 0%, rgba($darkblue, 0.2) 100%);
}

iframe {
  background: radial-gradient(circle, rgba($darkblue, 0.1) 0%, rgba($darkblue, 0.2) 100%);
}

// Flexible video container.
.video-responsive,
.video-player,
%video {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 56.25%;

  iframe,
  object,
  embed {
    @extend %fill;
    width: 100%;
    height: 100%;
  }
}

video {
  width: 100%;
  height: auto;
}

.field--name-field-media-oembed-video {
  @extend %video;
}

// alignment options.
%alignment {
  &.align-left {
    float: left;
    margin: 0 3rem 3rem 0;

    +figcaption {
      float: left;
      margin-bottom: 2rem;
      margin-right: 3rem;
    }
  }

  &.align-right {
    float: right;
    margin: 0 0 3rem 3rem;

    +figcaption {
      float: right;
      margin-bottom: 2rem;
      margin-left: 3rem;
    }
  }

  &.align-center {
    @extend %trim;
    margin: units(5) auto; //4rem auto

    img {
      margin: auto;
    }

    +figcaption {
      margin-left: auto;
      margin-right: auto;
    }
  }

  &.align-left,
  &.align-right,
  &.align-center {
    figure>& {

      .field--type-text-with-summary &,
      .field--type-text-long & {
        margin-top: 0;
        margin-bottom: 0;
      }
    }
  }
}

// Figure alignment formatting.
figure {
  @extend %alignment;
  @extend %trim;
  margin: 4rem 0;
}

.media--type-remote-video {

  .field--type-text-with-summary &,
  .field--type-text-long & {
    margin: units(5) 0; //4rem 0

    .image-caption-wrapper {
      @extend caption;
    }
  }

  figure>& {

    .field--type-text-with-summary &,
    .field--type-text-long & {
      margin-top: 0;
      margin-bottom: 0;
    }
  }
}

.media--type-image {
  .media__content {
    .image-caption-wrapper {
      display: inline-block;
      text-align: left;
    }
  }

  .field--name-field-media-caption {
    @extend caption;
  }

  .field--type-text-with-summary &,
  .field--type-text-long & {
    @extend %alignment;
  }

  figure>& {

    .field--type-text-with-summary &,
    .field--type-text-long & {
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  &.media--view-mode-xs,
  &.media--view-mode-xs+figcaption {
    width: 50%;

    @include breakpoint($tablet) {
      width: 25%;
    }
  }

  @include at-media("desktop") {

    &.media--view-mode-sm,
    &.media--view-mode-sm+figcaption {
      width: 50%;
    }

    &.media--view-mode-md,
    &.media--view-mode-md+figcaption {
      width: 66%;
    }
  }

  &.media--view-mode-logo {
    img {
      max-width: 100%;
      width: auto;
    }
  }
}

div.file,
div.field--name-field-link-files>.field__items>.field__item {
  @include file-link;

  &::before {
    @include file-document;
  }
}

div.file--audio {
  @include file-link;

  &::before {
    @include file-audio;
  }
}

div.file--video {
  @include file-link;

  &::before {
    @include file-video;
  }
}

div.file--mime-application-pdf {
  @include file-link;

  &::before {
    @include file-document-pdf;
  }
}

.field--type-image div.file {
  @include file-link;

  &::before {
    @include file-image;
  }
}

// Increase the size of the external link icon.
svg.ext {
  width: 24px;
  height: 24px;
  margin-left: 2px;
}

.page-node--28066 {
  .media-thumb.twitteraccts {
    img {
      max-width: 202px;
    }
  }
}

/* WYSIWYG Image Captions */
figure:has(article.align-right):has(figcaption) .align-right.media--type-image {
  float: none;
  margin: 0 0 1rem 3rem;
}

figure:has(article.align-left):has(figcaption) .align-left.media--type-image {
  float: left;
  margin: 3rem 3rem 1rem 0;
}

figure:has(article.align-center):has(figcaption) .align-center.media--type-image {
  margin: 0 auto 1rem auto;
}


figure:has(article.align-right):has(figcaption) {
  float: right;
}

figure:has(article.align-left):has(figcaption) {
  float: left;
}

figure:has(article.align-right) figcaption {
  margin: 0 0 3rem 3rem;
}

figure:has(article.align-left) figcaption {
  margin: 0 3rem 3rem 0;
}

figure:has(article.align-center) figcaption {
  margin: 1rem 0 3rem 0;
  text-align: center;
}

figure:has(article.media):has(figcaption) {
  margin: 1rem 3rem 3rem 0;
}

/*
figure:has(article.media.media--type-image.media--view-mode-xs):has(figcaption) .media--type-image.media--view-mode-xs, 
figure:has(article.media.media--type-image.media--view-mode-sm):has(figcaption) .media--type-image.media--view-mode-sm,
figure:has(article.media.media--type-image.media--view-mode-md):has(figcaption) .media--type-image.media--view-mode-md
{
  width: 100%;   
}*/

figure:has(article.align-right.media.media--type-image.media--view-mode-xs):has(figcaption) {
  float: right;
}

figure:has(article.align-left.media.media--type-image.media--view-mode-xs):has(figcaption) {
  float: left;
}

figure:has(article.align-right.media.media--type-image.media--view-mode-sm):has(figcaption) {
  float: none;
}

figure:has(article.align-left.media.media--type-image.media--view-mode-sm):has(figcaption) {
  float: none;
}

figure:has(article.align-right.media.media--type-image.media--view-mode-md):has(figcaption) {
  float: right;
}

figure:has(article.align-left.media.media--type-image.media--view-mode-md):has(figcaption) {
  float: left;
}

figure:has(article.media.media--type-image.media--view-mode-sm):has(figcaption) {
  width: 100%;
}

.media--type-image.media--view-mode-xs {
  width: 25%;
}

.media--type-image.media--view-mode-xs+figcaption {
  width: 25%;
}

a:has(.media--type-image.media--view-mode-xs)+figcaption {
  width: 25%;
}

article.media.media--type-image.media--view-mode-_3-width {
  width: 33%;
}

.media--type-image.media--view-mode-_3-width+figcaption {
  width: 33%;
}

a:has(.media--type-image.media--view-mode-_3-width) + figcaption {
  width: 33%;
}

.media--type-image.media--view-mode-md+figcaption {
  width: 100%;
}

a:has(.media--type-image.media--view-mode-md)+figcaption {
  width: 100%;
}





figure:has(article.media.media--type-image.media--view-mode-md):has(figcaption) .media--type-image.media--view-mode-md {
  width: 66%;
}

figure:has(article.media.media--type-image.media--view-mode-sm):has(figcaption) .media--type-image.media--view-mode-sm {
  width: 50%;
}

figure:has(article.media.media--type-image.media--view-mode-xs):has(figcaption) .media--type-image.media--view-mode-xs {
  width: 25%;
}

figure:has(article.media.media--type-image.media--view-mode-sm):has(figcaption) {
  width: 100%;
}

.media--type-image.media--view-mode-xs+figcaption {
  width: 25%;
}

@media screen and (max-width: 1023px) {
  figure:has(article.media.media--type-image.media--view-mode-sm):has(figcaption) .media--type-image.media--view-mode-sm {
    width: 100%;
  }

  figure.align-right+figcaption,
  .field--type-text-with-summary .align-right.media--type-image + figcaption,
  .field--type-text-with-summary a:has(.align-right.media--type-image) + figcaption,
  .field--type-text-long .align-right.media--type-image + figcaption,
  .field--type-text-long a:has(.align-right.media--type-image) + figcaption {
    float: none;
    margin-left: 0;
  }

  figure.align-left+figcaption,
  .field--type-text-with-summary .align-left.media--type-image+figcaption,
  .field--type-text-with-summary a:has(.align-left.media--type-image)+figcaption,
  .field--type-text-long .align-left.media--type-image+figcaption,
  .field--type-text-long a:has(.align-left.media--type-image)+figcaption {
    float: none;
    margin-right: 0;
  }
}
  

.field--type-text-with-summary a:has(.align-right.media--type-image) + figcaption {
  float: right;
  margin-bottom: 2rem;
  margin-left: 3rem;
}
.field--type-text-with-summary a:has(.align-left.media--type-image) + figcaption {
  float: left;
  margin-bottom: 2rem;
}

figure:has(article.align-right):has(figcaption) .align-right.media--type-image {
  float: right;
}

@media screen and (max-width: 639px) {

  figure:has(article.media.media--type-image.media--view-mode-xs):has(figcaption) .media--type-image.media--view-mode-xs {
    width: 100%;
  }

  .media--type-image.media--view-mode-xs+figcaption {
    width: 100%;
  }

  article.media.media--type-image.media--view-mode-_3-width {
    width: 100%;
  }

  .media--type-image.media--view-mode-_3-width+figcaption {
    width: 100%;
  }

  figure:has(article.media.media--type-image.media--view-mode-md):has(figcaption) .media--type-image.media--view-mode-md {
    width: 100%;
  }
}

@media screen and (min-width: 1024px) {
  a:has(.media--type-image.media--view-mode-xs) + figcaption {
    width: 25%;
  }

  a:has(.media--type-image.media--view-mode-sm) + figcaption {
    width: 50%;
  }

  a:has(.media--type-image.media--view-mode-md) + figcaption {
    width: 66%;
  }
}