@import "settings.colors";

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

.c-article-background {
  @include display-grid;
  @include grid-template-rows(0, grid-repeat(4, auto));
  @include grid-template-columns(0, 1fr);
  background-color: $color-stone-150;
  border-left: rem(5) solid $color-red-700;
  margin-left: rem(10);
  margin-right: rem(10);
  &:hover {
    border-color: $color-red-500;
    background-color: $color-stone-200;
  }
  &:active {
    border-color: $color-red-700;
  }

  .c-button {
    margin-left: auto;
    align-self: center;
  }
  .c-button--white-secondary--hover {
    background-color: darken($color-stone-150, 8%);
  }
  .c-button--white-secondary--active {
    background-color: darken($color-stone-150, 16%);
  }
}
.c-article-background-header {
  @include grid-row(1, 2);
  .c-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: rem(10);
    text-align: left;
    .c-button__text {
      display: flex;
      flex-direction: column;
    }
    .c-button__icon {
      margin-left: auto;
      margin-right: 0;
    }
  }

  .c-micro-text {
    padding-top: 0;
  }

  .c-article-background-header__text--label,
  .c-article-background-header__text--time {
    @include font-gm-sans;
    letter-spacing: rem(1);
    @include css-variables("font-size", 12);
    display: inline-block;
  }
  .c-article-background-header__text--label {
    @include font-gm-sans-bold;
    color: $color-red-700;
    font-style: normal;
    padding-bottom: 0;
  }
  .c-article-background-header__text--time {
    color: $color-grey-660;
    padding-top: rem(5);
    padding-bottom: 0;
  }
  .c-article-background-btn__icon {
    height: rem(16);
    width: rem(16);
  }
}
.c-article-background__title {
  @include grid-row(2, 3);
  @include font-pratt-bold;
  @include css-variables("font-size", 17);
  line-height: line-height(17, 20);
  letter-spacing: rem(0.3);
  color: $color-grey-900;
  padding: rem(5) 0 rem(15) rem(10);
  padding-right: rem(44);
}
.c-article-background-body {
  @include grid-row(3, 4);
  display: none;
  padding-right: rem(10);
}
.c-article-background-body__text {
  @include font-gm-sans;
  @include css-variables("font-size", 16);
  letter-spacing: rem(0.3);
  padding: rem(5) rem(10) 0 rem(10);
  color: $color-grey-800;
  p:first-child {
    margin-top: 0;
  }
  mark {
    background-color: transparent;
  }
  a {
    color: inherit;
  }
}
.c-article-background-footer {
  @include grid-row(4, 5);
  display: none;
  flex-direction: row;
  .c-article-background-footer__text {
    margin-left: auto;
  }
  .c-button.c-button--small {
    @include css-variables("font-size", 12);
    .c-article-background-btn__icon {
      height: rem(16);
      width: rem(16);
    }
  }
}
.c-article-background.c-article-background--open {
  .c-article-background-body {
    display: block;
  }
  .c-article-background-footer {
    display: flex;
  }
}
