@import "../app-doc/app-doc.scss";

:host {
  display: block;

  .doc-section-label {
    display: flex;
    align-items: center;
    scroll-margin-top: 6.5rem;

    > a {
      color: var(--primary-color);
      opacity: 0.7;
      margin-left: 1rem;
      display: none;
      transition:
        opacity 0.3s,
        colors 0.3s;
    }

    &:hover {
      > a {
        display: block;

        &:hover {
          opacity: 1;
        }
      }
    }
  }

  .doc-section-description {
    > p {
      font-size: 1.125rem;
      color: var(--surface-800);

      i {
        border-radius: 6px;
        padding: 2px 6px;
        font-size: 0.875rem;
        font-weight: 600;
        font-style: normal;
      }

      a {
        color: var(--primary-color);
        font-weight: 600;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
