@import 'commonArticle.css';

@tailwind components;

@layer components {
  .doc {
    @apply pb-128 font-plex-sans text-18 leading-loose;

    h1,
    h2,
    h3,
    h4 {
      @apply py-10 font-plex-sans font-bold leading-30 lg:leading-40;
    }

    h1 {
      @apply text-38 text-gray-dark-12;
    }

    h2 {
      @apply text-32 text-gray-dark-12;
    }

    h3 {
      @apply text-26 text-gray-dark-12;
    }

    h4 {
      @apply font-medium text-gray-dark-12;
    }

    p > img {
      @apply m-0 mb-20 rounded-8 p-0;
      width: 100%;
      height: auto;
    }

    p {
      @apply pb-20 leading-normal;
      width: 100%;
    }

    a {
      @apply text-yellow;
    }

    a:not(.no-underline) {
      @apply hover:underline;
    }

    ul {
      @apply pl-32;

      li {
        @apply list-disc pb-10;
      }
    }

    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      padding-inline-start: 40px;
      unicode-bidi: isolate;
      padding-bottom: 20px;
    }
  }

  .sidebar-nav {
    width: 100%;
    position: sticky;
    top: 34px;
    margin-top: 34px;
    border-left-style: dashed;
    border-left-width: 1px;
    border-color: #555;
    padding-left: 18px;
    @apply mb-50;

    > ul {
      &:last-child {
        @apply pb-0;
      }
    }

    li {
      &:first-child {
        @apply pl-0;
        line-height: 1;
      }

      li {
        @apply p-0;
      }

      @apply pb-8 pl-0 opacity-80 transition duration-150 hover:opacity-100;

      > ul {
        @apply pl-10;
      }
    }

    > div {
      height: 100%;
      padding: 0;
      overflow: auto;
    }
  }

  .docs-search-container {
    @apply pb-20 pr-8;
    .search-input {
      @apply w-full border-gray-dark-7 bg-gray-dark-2 hover:border-gray-dark-8 focus:border;
    }
  }

  [data-menu-item='cli'],
  [data-menu-item='sdk'] {
    text-transform: uppercase;
  }
}
