.topic {
  display: flex;
  flex-flow: column nowrap;

  .topic-header {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
  }

  .topic-form {
    position: relative;

    .topic-buttons {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: var(--bs-tertiary-bg);
      padding: 1rem;
      margin: 0 -1rem 1rem;
    }
  }

  .topic-content {
    @extend %editor-content;

    img {
      display: block;
      margin: auto;
    }
  }

  .topic-cover {
    height: 400px;
    position: relative;
    z-index: 0;

    .background {
      position: absolute;
      inset: 0;
      object-fit: cover;
      z-index: -1;
      width: 100%;
      height: 100%;
    }

    .wrapper {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 2rem;
      color: var(--bs-white);
      height: 100%;
      background: rgba(var(--bs-black-rgb), 0.5);

      .text {
        white-space: pre-wrap;
        max-height: 300px;
        overflow-y: scroll;
        scrollbar-width: none;
        -ms-overflow-style: none;

        &::-webkit-scrollbar {
          display: none;
        }
      }

      .action {
        text-align: center;
      }
    }
  }

  .topic-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .topic-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
  }

  &.teaser {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;

    h2 {
      a {
        color: inherit;
        text-decoration: underline;

        &:hover {
          color: var(--bs-link-hover-color);
        }
      }
    }

    .topic-category {
      padding: 0 1rem;
      margin: 1rem 0;
    }

    .topic-tags {
      padding: 0 1rem;
    }

    .topic-footer {
      margin-top: 0;
      padding: 1rem;
      border-top: none;
    }

    &.inactive {
      opacity: 0.5;
    }
  }
}

.topics {
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
}