@import "settings.colors";

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

.c-article-actions {
  border-bottom: 1px solid $color-stone-200;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.c-article-action {
  @include meta-text;
  @include font-gm-sans;
  margin-right: rem(12);
  padding: rem(15) rem(12) rem(15) 0;
  color: $color-grey-660;
  text-decoration: none;
  @include css-variables("font-size", 12);
  letter-spacing: rem(1);
  line-height: 1;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    margin-top: rem(-15); // Subtract padding-top
    background-color: $color-stone-200;
  }
  &:hover,
  &:focus {
    .c-article-action__text {
      text-decoration: underline;
    }
  }
  .c-indicator-icon {
    margin-left: 0;
  }
  .c-indicator-icon__art {
    width: rem(15);
    height: rem(15);
  }
  .c-article-action__text {
    display: inline-block;
    vertical-align: middle;
  }
}
