@import "settings.colors";
@import "settings.z-index";

@import "mixins/tools.mixins";

.c-article-meta {
  @include meta-text;
  margin-bottom: rem(10);
  padding-top: rem(10);
  padding-bottom: 0;
  border-top: 1px solid $color-stone-300;
  border-bottom: 1px solid $color-stone-200;
}
.c-article-meta__image {
  margin-right: 0;
  margin-bottom: rem(10);
}
.c-article-meta__bylines {
  color: $color-grey-900;
}
.c-article-meta__timestamps--outdated {
  background-color: $color-utility-yellow-200;
  margin-top: rem(10);
  padding: rem(10);
  .c-timestamp {
    @include font-gm-sans-bold;
    line-height: 1;
  }
}
.c-article-meta__outdated-message {
  @include css-variables("font-size", 15);
  letter-spacing: rem(0.3);
  line-height: line-height(15, 17);
  margin-bottom: 0;
  margin-top: rem(10);
  text-transform: initial;
}
.c-article-meta__author-info {
  display: block;
  .c-byline {
    margin-right: rem(10);
  }
  .c-beat {
    display: inline;
  }
}

.c-article-meta {
  .c-topic-group__body > ul {
    margin: 0;
    padding-left: 0;
    list-style-type: none;
    > .c-topic {
      @include font-gm-sans-bold;
      position: relative;
      display: inline-block;
      margin-top: rem(10);
      margin-right: rem(6);
      &:last-child {
        margin-right: 0;
      }
    }
  }

  .c-topic-group__body {
    margin-bottom: rem(10);
  }

  .o-media__body + .c-topic-group__body {
    margin-bottom: 0;
  }
}

.c-article-meta__subscribers {
  display: flex;
  align-items: flex-end;
  margin-top: rem(5);

  // this is essentially a copy of .c-label--card__content
  // but is reproduced here for two reasons:
  // 1. so that for the time being we don't need to include components.labels into the article page just for this label
  // 2. eventually we should refactor labels into a more abstract implementation than today ie. closely tied to cards
  .c-article-meta__subscribed {
    @include font-gm-sans-bold;
    padding: rem(4) rem(7);
    color: $color-white;
    text-transform: uppercase;
    @include css-variables("font-size", 12);
    display: inline-block;
    letter-spacing: rem(1);
    line-height: 1;
    background-color: $color-stone-900;
    margin-right: rem(20);
  }

  .c-comments-bar__link {
    display: block;
    text-decoration: none;

    &:hover .c-comments-bar__count__text {
      text-decoration: underline;
    }

    &:active .c-comments-bar__count__text {
      color: $color-grey-900;
      text-decoration: underline;
    }
  }
}

// applies only to the column/opinion with the headshot
@include mq($until: 420px) { // TODO: Should this be rem(420) instead?
  .o-media__media + .o-media__body .c-article-meta__subscribers {
    display: block;

    .c-comments-bar__link {
      margin-top: rem(10);
    }
  }
}

.c-article-meta__actions {
  @include flex-display;
  align-items: center;
  border-top: 1px solid $color-stone-300;
  margin-top: rem(10);
  margin-bottom: 0;
  position: relative;
}

.c-article-meta__actions__comments,
.c-article-meta__actions__share {
  > .c-button {
    padding-left: rem(4);
    padding-right: rem(4);

    .c-button__text {
      @include font-gm-sans;
      @include css-variables("font-size", 12);
    }
    .c-button__icon {
      margin-right: rem(5);
      fill: $color-grey-300;
    }
  }
}

// We only want to target the bookmark trigger button and not the close
// button that belongs to the bookmark onboarding message.
.c-article-meta__actions__bookmark {
  > .c-article-meta__bookmark.c-button {
    padding-left: rem(4);
    padding-right: rem(4);

    .c-button__text {
      @include font-gm-sans;
      @include css-variables("font-size", 12);
    }
    .c-button__icon {
      margin-right: rem(5);
    }
  }
}

.c-article-meta__actions__share,
.c-article-meta__actions__bookmark,
.c-article-meta__actions__audio {
  position: relative;
}

.c-article-meta__actions__audio {
  margin-left: auto;
}

.c-article-meta__actions__share {
  .c-dropdown-menu {
    .c-button {
      border-width: 0;
      justify-content: center;
    }
  }
  .c-dropdown-menu__inner  {
    width: auto; // 220px
    display: flex;
  }
}

.c-article-meta__actions__bookmark {
  .c-website-alert {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.2s, opacity 0.2s linear;
    background: $color-utility-yellow-100;
    width: rem(220);
    position: absolute;
    top: rem(25);
    right: 0;
    border: 1px solid $color-stone-300;
    padding: rem(10);
    z-index: $z-index-bookmark-tooltip;

    &.c-website-alert--visible {
      opacity: 1;
      visibility: visible;
      transition-delay: 0s;
    }
  }
  .c-website-alert__content {
    font-size: rem(15);
    line-height: line-height(15, 17);
    letter-spacing: rem(0.3);
    text-transform: none;
  }
}

.c-article-meta__audio .c-button__icon {
  width: rem(20);
  height: rem(22);
}

// User is logged in
.c-article-meta__bookmark,
.c-article-meta__audio {
  &,
  &:visited,
  &:hover,
  &:focus,
  &:active {
    .c-button__icon {
      fill: transparent;
      stroke: $color-grey-660;
    }
    .c-button__icon__use {
      fill: $color-grey-660;
      stroke: $color-grey-660;
      color: transparent;
    }
  }
}

// User is not logged in
.c-article-meta__bookmark--inactive,
.c-article-meta__audio--inactive {
  &,
  &:visited,
  &:hover,
  &:focus,
  &:active {
    .c-button__icon {
      fill: transparent;
      stroke: $color-grey-660;
    }
    .c-button__icon__use {
      fill: $color-grey-660;
      stroke: $color-grey-660;
      color: transparent;
    }
  }
}

// Article is bookmarked / audio player has been revealed
.c-article-meta__bookmark--active,
.c-article-meta__audio--active {
  &,
  &:visited,
  &:hover,
  &:focus,
  &:active {
    .c-button__icon {
      fill: $color-grey-660;
      stroke: $color-grey-660;
    }
    .c-button__icon__use {
      fill: $color-grey-660;
      stroke: $color-grey-660;
      color: $color-grey-660;
    }
  }
}

// Text resizer button text
.c-article-meta__text-resizer-decrease {
  &.c-button {
    text-align: right;
  }

  &.c-button--icon-only {
    padding: rem(7) 0 0 0;
  }

  .c-button__icon {
    width: rem(29);
    height: rem(13);
  }
}

.c-article-meta__text-resizer-increase {
  &.c-button--icon-only {
    padding: 0;
    margin-left: rem(-5);
  }

  .c-button__icon {
    width: rem(34);
    height: rem(19);
  }
}

.c-article-meta__actions__text-resizer {
  .c-button[disabled], .c-button:disabled {
    color: $color-grey-300;
  }
}

.c-article-meta__text-resizer-status {
  padding-right: rem(10);
  vertical-align: middle;
}
