@use "../../../ui/vars" as *;

.sidebar {
  color: var(--text-secondary);

  .backdrop {
    display: none;
  }

  &-heading {
    color: var(--text-primary);
    font: var(--type-heading-h5);
    letter-spacing: 1.5px;
    margin: 0;
  }

  em {
    background-color: var(--background-toc-active);
    border-bottom-right-radius: 0.25rem;
    border-left: 2px solid var(--category-color);
    border-top-right-radius: 0.25rem;
    display: inline-block;
    font-style: normal;
    font-variation-settings: normal;
    font-weight: 600;
    hyphens: auto;
    padding: 0.25rem 0.5rem;
  }

  a {
    color: var(--text-secondary);
    display: inline-block;
    hyphens: auto;
    padding: 0.25rem;

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

  li.section {
    display: flex;
    font-size: var(--type-base-font-size-rem);
    font-weight: var(--font-body-strong-weight);
    letter-spacing: 0.02rem;
    margin-top: 1.5rem;

    &.no-link {
      padding: 0.25rem;
    }
  }

  li:first-of-type strong {
    margin-top: unset;
  }

  ol {
    font-size: var(--type-smaller-font-size);

    ol,
    ul {
      padding-left: 0.5rem;
    }

    li {
      .icon {
        margin-right: 0.01em;
      }

      &.no-bullet {
        display: block;
        font-weight: var(--font-body-strong-weight);
        list-style-type: none;
      }
    }
  }

  .sidebar-actions {
    height: 0;
    padding-bottom: 4rem;
    position: sticky;
    top: 0;
    z-index: var(--z-index-main-header);

    ~ .sidebar-inner-nav {
      margin-top: 0.5rem;
    }

    @media (max-width: $screen-md) {
      height: unset;
      margin-top: unset;
      padding-bottom: unset;
      position: unset;
      top: unset;

      ~ .sidebar-inner-nav {
        margin-top: unset;
      }
    }
  }

  /* This is for sidebars where there is no sub-heading
   * for example: https://developer-mozilla.org/en-US/docs/Web/HTML/Element/progress
   */
  .sidebar-heading ~ ol,
  .sidebar-heading ~ div > ol {
    margin-top: 1rem;
  }

  summary,
  li {
    margin-bottom: 0.5rem;
  }

  summary {
    cursor: pointer;
    font-size: var(--type-smaller-font-size);
  }

  code {
    background-color: initial;
    border-radius: var(--elem-radius);
    font-family: var(--font-code);
    font-size: var(--type-smaller-font-size);
    line-height: 1.2;
    padding: 0.125rem;
    white-space: normal;
    word-wrap: break-word;
  }

  details {
    margin: 0.75rem 0;

    ol {
      padding-left: 0.75rem;
    }
  }

  .icon {
    align-self: center;
    background-size: 14px;
    height: 14px;
    margin-right: -0.25rem;
    mask-size: 14px;
    width: 14px;
  }

  /* icons in sidebars */
  .icon-experimental,
  .icon-nonstandard {
    background-color: var(--icon-information);
  }

  .icon-deprecated {
    background-color: var(--icon-critical);
  }

  // apply drawer styles only to the sizes that need them.
  @media (max-width: #{$screen-md - 1}) {
    height: 100vh;
    left: 0;
    max-height: 100vh;
    position: fixed;
    right: 0;
    top: var(--offset);
    transform: translateX(-100%);

    .sidebar-inner {
      background: var(--background-primary);
      border-right: 1px solid var(--border-primary);
      display: grid;
      height: var(--max-height);
      max-height: var(--max-height);
      max-width: 20rem;
      overflow: hidden; //animations look janky if scrollbars are present
      overflow: auto;
      padding: 1rem;
      position: relative;
      transform: translateX(-100%);
      transition: 0.2s linear transform;
      width: 80vw;
      will-change: transform;

      .sidebar-inner-nav {
        display: contents;
        mask-image: linear-gradient(
          to bottom,
          rgb(0, 0, 0) 0% calc(100% - 3rem),
          rgba(0, 0, 0, 0) 100%
        );
        padding-bottom: 3rem;
      }

      @media (min-height: $screen-height-place-limit) {
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .sidebar-inner-nav {
          display: block;
          overflow: auto;
        }
      }

      .place {
        align-self: center;
        grid-row: 2/3;
        justify-self: center;
        margin-bottom: 0;
      }
    }

    .backdrop {
      background: rgba(0, 0, 0, 0.3);
      border-radius: 0;
      bottom: 0;
      cursor: default;

      display: flex;
      left: 0;
      opacity: 0;
      position: fixed;
      right: 0;
      top: 0;
      transition: opacity 0.2s linear;
      width: 100%;
      will-change: opacity;
    }

    &.is-animating {
      transform: translateX(0);
    }

    &.is-expanded {
      transform: translateX(0); // no transition on this one, just show it.

      .sidebar-inner {
        transform: translateX(0);
      }

      .backdrop {
        opacity: 1;
      }
    }
  }

  @media (min-width: $screen-md) {
    .place {
      display: none;
    }
  }
  @media (min-width: $screen-md) {
    display: flex;
    position: relative;
  }
  @media (min-width: $screen-lg), (min-height: $screen-height-place-limit) {
    display: block;
    overflow: auto;
  }
  @media (min-width: $screen-xl) {
    max-height: var(--max-height);
    position: sticky;
    top: var(--offset);
  }
}