@import "settings.colors";
@import "settings.fonts";
@import "mixins/components.button";
@import "mixins/tools.functions";
@import "mixins/tools.mixins";

.c-topic-group__heading {
  margin: 0;
  @include font-gm-sans-bold;
  @include css-variables("font-size", 12);
  text-transform: uppercase;
  line-height: line-height(12, 12);
  letter-spacing: rem(1);
  color: $color-grey-660;
}

.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(10);
    &:last-child {
      margin-right: 0;
    }
  }

  .c-topic-icon {
    @include css-variables("width", 34);
    @include css-variables("border-radius", 25);
    @include css-variables("min-height", 34);
    @include css-variables("min-width", 34);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;

    & ~ .c-topic-name {
      @include c-button-theme("white-primary");
      @include css-variables("padding-left", 39);
      @include css-variables("font-size", 12);
      @include css-variables("min-height", 34);
    }

    & ~ .c-topic-author {
      color: $color-red-800;
      &:hover, &:focus, &:active {
        color: $color-red-800;
      }
    }
  }
}

.c-topic-group__body {
  .c-button--small:not(.c-button--icon-only) .c-button__icon {
    @include css-variables("width", 18);
  }

  .c-topic-icon, .c-topic-page {
    .c-button__icon {
      @include css-variables("height", 14);
      @include css-variables("width", 18);
      @include css-variables("width", 18);
    }

    // Follow state
    &:hover[data-status="unfollowing"]:not(.c-topic-disabled) {
      background: $color-utility-green-100;
    }

    &:focus[data-status="unfollowing"]:not(.c-topic-disabled),
    &:focus[data-status="following"] {
      background: $color-white;
    }

    &:active[data-status="following"] {
      background: #d3d3cc;
    }

    &:active[data-status="unfollowing"]:not(.c-topic-disabled) {
      background: $color-utility-green-500;

      .c-button__icon {
        fill: $color-white;
      }

      .c-button__text {
        color: $color-white;
      }
    }
  }
}

// Will be displayed to anonymous users
.c-topic-group__body .c-topic-disabled {
  &:focus {
    background: #e6e6e2;
  }
}
