@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 {
  font-size: rem(15);
  letter-spacing: rem(0.3);
  line-height: rem(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__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;
    font-size: rem(12);
    margin-top: rem(5);
    display: inline-block;
    letter-spacing: rem(1);
    line-height: rem(12);
    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;
    }
  }
}

// Cannabis Pro label
.c-article-meta__canpro {
  @include font-gm-sans-bold;
  padding: rem(4) rem(7);
  color: $color-white;
  text-transform: uppercase;
  font-size: rem(12);
  margin-top: rem(5);
  display: inline-block;
  letter-spacing: rem(1);
  line-height: rem(12);
  background-color: $color-canpro-700;
}

//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-dropdown-menu {
    right: 0;
  }
}

.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;
      font-size: rem(12);
    }
    .c-button__icon {
      margin-right: rem(5);
      fill: $color-grey-300;
    }
  }
}

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

.c-article-meta__actions__share {
  .c-dropdown-menu {
    right: calc(50% - #{rem(110)}); // Subtract half of menu's width

    .c-button {
      border-width: 0;
      justify-content: center;
    }
  }
  .c-dropdown-menu__inner  {
    width: auto; // 220px
    display: flex;
  }
}
.c-article-meta__actions__share--align-left {
  position: static;
  .c-dropdown-menu {
    left: 0;
    right: auto;
    &::after,
    &::before {
      display: none;
    }
  }
}

.c-article-meta__actions__bookmark {
  margin-left: auto;

  .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-300;
    }
    .c-button__icon__use {
      fill: $color-grey-300;
      stroke: $color-grey-300;
      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;
    }
  }
}
