@import "../_variables";
@import "../_mixins";

.sidebar {
  ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
  }

  a {
    display: inline-block;
  }

  .navbar-items {
    display: none;
    border-bottom: 1px solid var(--c-border);
    transition: border-color var(--t-color);
    padding: 0.5rem 0 0.75rem 0;

    a {
      font-weight: 600;
    }

    .navbar-item {
      display: block;
      line-height: 1.25rem;
      font-size: 1.1em;
      padding: 0.5rem 0 0.5rem 1.5rem;
    }
  }

  .sidebar-items {
    padding: 1.5rem 0;
  }
}

@media (max-width: $MQMobile) {
  .sidebar {
    .navbar-items {
      display: block;

      .navbar-dropdown-wrapper
        .navbar-dropdown
        .navbar-dropdown-item
        a.router-link-active::after {
        top: calc(1rem - 2px);
      }
    }

    .sidebar-items {
      padding: 1rem 0;
    }
  }
}

.sidebar-item {
  cursor: default;
  border-left: 0.25rem solid transparent;
  color: var(--c-text);

  &:focus-visible {
    outline-width: 1px;
    outline-offset: -1px;
  }

  &.active:not(p.sidebar-heading) {
    font-weight: 600;
    color: var(--c-text-accent);
    border-left-color: var(--c-text-accent);
    background-color: var(--c-bg-lighter);
  }

  &.sidebar-heading {
    transition: color 0.15s ease;
    font-size: 1.1em;
    font-weight: bold;
    padding: 0.35rem 1.5rem 0.35rem 1.25rem;
    width: 100%;
    box-sizing: border-box;
    margin: 0;

    + .sidebar-item-children {
      @include dropdown_wrapper;
      margin-bottom: 0.75rem;
    }

    &.collapsible {
      cursor: pointer;

      .arrow {
        position: relative;
        top: -0.12em;
        left: 0.5em;
      }
    }
  }

  &:not(.sidebar-heading) {
    font-size: 1em;
    font-weight: 400;
    display: inline-block;
    margin: 0;
    padding: 0.35rem 1rem 0.35rem 2rem;
    line-height: 1.4;
    width: 100%;
    box-sizing: border-box;

    & + .sidebar-item-children {
      padding-left: 1rem;
      font-size: 0.95em;
    }

    .sidebar-item-children .sidebar-item-children & {
      padding: 0.25rem 1rem 0.25rem 1.75rem;

      &.active {
        font-weight: 500;
        border-left-color: transparent;
        background: transparent;
      }
    }

    a.sidebar-heading + .sidebar-item-children &.active {
      border-left-color: transparent;
      background: transparent;
    }
  }
}

a.sidebar-item {
  cursor: pointer;

  &:hover {
    color: var(--c-text-accent);
  }
}