@import "../pages/mixins";

.topic-tab-list {
  /* theming */
  background-color: var(--dark-3);
  border-radius: 2px 2px 0 0;

  @add-mixin for-md {
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 1rem;
  }

  @add-mixin from-md {
    /* sizing */
    padding: 0.625rem 2.25rem 0.75rem 2.25rem;
    /* prevent tabs from wrapping */
    white-space: nowrap;
  }

  /* list items */
  & .topic-tab-item {
    list-style-type: none;
    display: inline-block;

    /* space out adjacent tab items */
    &:not(:last-of-type) {
      margin-right: 1.25rem;
    }

    /* clickable button */
    & .topic-tab-button {
      cursor: pointer;
      /* sizing */
      line-height: 1.5;
      /* theming */
      opacity: 0.666;
      border-bottom: 0.125em solid transparent;
      /* transitions */
      transition:
        border-color 0.3s ease-out,
        color 0.3s ease-out,
        opacity 0.3s ease-out;

        @add-mixin for-sm {
          @add-mixin font-xs;
        }

      /* interactions */
      &:hover, &:focus {
        opacity: 1;
        color: var(--accent-light);
      }

      /* active state */
      &.is-active {
        border-bottom-color: var(--accent);
        color: var(--white);
        opacity: 1;
      }

      /* hide outline */
      &:active,
      &.is-active:focus {
        outline: none;
        border-color: var(--accent-light);
      }
    }
  }
}
