@import "settings.colors";

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";

.c-article-media {
  margin: rem(20) 0;
}

.c-article-media--lead {
  margin-top: 0;
}

.c-article-media--video {
  margin: 0;
}

.c-article-media--overlay {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;

  .c-article-media__image {
    width: 100%;
    height: 100%;

    .c-article-media__link {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .c-article-media__info {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 2;
    background: rgba($color-stone-100, 0.8);
  }

  .c-article-media__info--dark {
    background: rgba($color-grey-900, 0.8);
  }

  .c-article-media__description {
    margin-bottom: rem(20);
  }
}

.c-article-media__image--full-fit {
  .c-image {
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
  }
}

.c-article-media__info {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: stretch;
}

.c-article-media__info--dark {
  background: $color-grey-900;

  .c-article-media__description {
    margin-bottom: rem(20);
  }

  .c-article-media__label,
  .c-article-media__caption,
  .c-article-media__credit {
    color: $color-white;
  }
}

.c-article-media__label,
.c-article-media__description {
  margin-top: rem(10);
  padding: 0;
}

.c-article-media__label {
  @include font-gm-sans;
  font-size: rem(16);
  line-height: line-height(16, 18);
  letter-spacing: rem(0.3);
  margin-bottom: 0;
  display: inline-block;
}

.c-article-media__label--interactive {
  pointer-events: none;
  padding: 0;
  margin: 0;
  display: block;
  position: absolute;
  z-index: 1;
  transform: translateY(-100%); // Height of element
  top: rem(-10);
}

.c-article-media__label--interactive-indented {
  left: rem(10);
}

.c-article-media__description {
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: stretch;
}

// add padding around divider line between desc and label
.c-article-media__info--line {
  .c-article-media__description {
    border-right: 1px solid $color-grey-300;
    padding-right: rem(10);
  }
  .c-article-media__label {
    padding-left: rem(10);
  }
}

// add extra padding when these are in slider
.c-article-media__info--center {
  .c-article-media__description {
    padding-left: rem(10);
  }
  .c-article-media__label {
    padding-right: rem(10);
  }
}

.c-article-media__caption,
.c-article-media__credit {
  margin-top: 0;
}

.c-article-media__caption {
  @include font-gm-sans;
  font-size: rem(14);
  line-height: line-height(14, 16);
  letter-spacing: rem(0.3);
  margin-bottom: rem(10);
  color: $color-grey-660;
  // Normally, we wouldn't use an element selector inside the "components"
  // layer of the ITCSS pyramid, but editors sometimes want to add links to
  // photo captions and we can't expect them to add the appropriate class to
  // the anchor element
  a {
    &,
    &:visited {
      color: $color-grey-660;
    }
    &:hover,
    &:focus {
      color: $color-grey-300;
    }
    &:active {
      color: $color-grey-900;
    }
  }
  .c-article-media__info--dark & {
    a {
      &,
      &:visited {
        color: $color-white;
      }
      &:hover,
      &:focus {
        color: $color-grey-300;
      }
      &:active {
        color: $color-grey-600;
      }
    }
  }
}

.c-article-media__credit {
  @include meta-text;
  margin-bottom: 0;
}

.c-article-media__center {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: stretch;
  width: $break-mobile;
  min-width: $break-mobile;
}
