:root {
  --scalar-font: "Graphik LCG", sans-serif;
  --scalar-radius: 2px;
}

.light-mode {
  --ngx-gray: #A4A4A4;

  /* Base */
  --scalar-background-1: #FFFFFF;
  --scalar-background-2: #FAFAFA;
  --scalar-background-3: #E9EFFA;
  --scalar-background-accent: rgba(17, 58, 96, 0.1);

  --scalar-color-1: #1E1E1E;
  --scalar-color-2: rgba(0, 0, 0, 0.55);
  --scalar-color-3: rgba(0, 0, 0, 0.4);

  --scalar-color-accent: #113A60;
  --scalar-border-color: rgba(17, 58, 96, 0.12);

  --scalar-scrollbar-color: #00000052;

  --scalar-color-green: #009918;
  --scalar-color-red: #C93A3F;
  --scalar-color-blue: #1388CA;
  --scalar-color-orange: #FF7A00;

  /* Links */
  --scalar-link-color: #25AAE1;
  --scalar-link-color-hover: var(--scalar-color-accent);


  /* Buttons */
  --scalar-button-1: var(--scalar-color-accent);
  --scalar-button-1-hover: #0C2944;
  --scalar-button-1-color: #FFFFFF;


  /* Tooltip */
  --scalar-tooltip-background: #FFFFFF;
  --scalar-tooltip-color: var(--scalar-color-1);


  /* Alerts */
  --scalar-color-alert: var(--scalar-color-orange);
  --scalar-color-danger: var(--scalar-color-red);

  --scalar-background-alert: #FCEDDF;
  --scalar-background-danger: #FFE9E5;


  /* Document Sidebar */
  --scalar-sidebar-background-1: var(--scalar-background-1);
  --scalar-sidebar-color-1: var(--scalar-color-accent);
  --scalar-sidebar-color-2: var(--scalar-color-1);
  --scalar-sidebar-border-color: transparent;

  --scalar-sidebar-item-hover-background: transparent;
  --scalar-sidebar-item-hover-color: var(--scalar-link-color);

  --scalar-sidebar-item-active-background: transparent;
  --scalar-sidebar-color-active: var(--scalar-color-red);

  --scalar-sidebar-indent-border: transparent;
  --scalar-sidebar-indent-border-hover: transparent;
  --scalar-sidebar-indent-border-active: transparent;

  --scalar-sidebar-search-background: var(--scalar-background-3);
  --scalar-sidebar-search-color: var(--ngx-gray);
  --scalar-sidebar-search-border-color: var(--ngx-gray);

  --scalar-sidebar-font-weight: 400;
  --scalar-sidebar-font-weight-active: 400;

  --scalar-color-query: var(--scalar-color-blue);

  --scalar-sidebar-width: 290px;

}

.md-container {
  & .md-main .md-grid {
    margin: 0;
  }
}

.api-container {
  flex-grow: 1;

  & .md-content__inner {
    margin: 0;
    padding-top: 0;

    &::before {
      height: 0;
    }
  }

  & .md-typeset {
    & ul li {
      margin-left: unset;
    }
  }

  & #scalar-container {
    & .t-doc__header {
      z-index: 3;

      & header {
        position: fixed;

        & span {
          overflow:hidden; 
          white-space:nowrap; 
          text-overflow: ellipsis;
        }
      }
    }

    & .references-layout {
      grid-template-columns: var(--scalar-sidebar-width) minmax(0, 1fr);
    }

    & aside.t-doc__sidebar {
      position: fixed;
      /* пересчитывается в extra-api-docs.js */
      top: 120px;
      height: calc(100dvh - 120px);
      padding-left: 0.8rem;
      padding-top: 0.5rem;
      z-index: 4;

      & > ul.group\/items {
        padding-left: 0.2rem;
        padding-right: 0;
      }
  
      & > ul > li.group\/item > .group\/group-button > .group\/button,
      & > ul > li.group\/item > .group\/button  {
        font-weight: 500;
      }

      .text-sidebar-c-active {
          color: var(--scalar-sidebar-color-active, var(--scalar-sidebar-color-1));
      }

      & > ul .group\/button {
        padding-left: 0;
      }

      
      & .group\/group-button:hover button {
        color: var(--scalar-link-color);
      }


      & .darklight-reference {
        display: none;
      }

      & .text-sidebar-c-search {
        font-weight: 500;
        border-radius: 8px;
      }
    }

    .section-container {
      padding-left: 1.2rem;
      padding-right: 1.2rem;
      background-color: var(--scalar-background-1);

      & .section:first-of-type {
        padding-top: 2rem;
      }
    }

    @media (width < 1000px) {
      & .references-layout {
        grid-template-columns: 100%;
      }
    }

    & .sticky-cards .introduction-card table {
      margin-top: 0;
    }

    & .markdown summary {
      padding: 0;
      min-height: auto;
      border-bottom: none;

      &:before {
        display: none;
      }
    }

    & .examples,
    & .sticky-cards {
      top: calc(var(--refs-viewport-offset) + 132px);
    }
  }
}