@use "breakpoints";
@use "typography";
@use "variables";

.nav-surveys {
  color: var(--text-color-dark);
}
.nav-surveys-link {
  &,
  &:link,
  &:visited {
    color: var(--text-color);
  }
}

.section-nav-loading {
  z-index: 10;
  position: absolute;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.section-nav-head {
  width: 100%;
  margin-bottom: variables.$spacing;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}
.section-nav-head-left {
  display: flex;
  gap: variables.$spacing;
  align-items: center;
}
.section-nav-toc {
  margin: 0;
  font-size: typography.$medium-font;
}
.section-nav-contents {
  display: none;
  .section-nav-shown & {
    display: block;
  }
}

.section-nav-items {
  position: relative;
  list-style-type: none;
  margin: 0;
  padding: 0;
  &::after {
    display: block;
    content: " ";
    width: 1px;
    background-color: var(--dark-border-color);
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 25px;
    z-index: 1;
  }
}
.section-nav-item {
  margin-bottom: variables.$spacing;
  position: relative;
  z-index: 2;
  &-current {
    .section-nav-item-completion {
      border-width: 4px;
      border-color: var(--border-color);
    }
  }
}
.section-nav-item-link {
  font-weight: typography.$medium !important;
  display: flex;
  align-items: center;
  gap: variables.$spacing;
  position: relative;
  @include breakpoints.large {
    height: 50px;
    width: 50px;
  }
}
.section-nav-item-label {
  display: block;
  text-align: center;
  color: var(--text-color-dark);
  .section-nav-item-current & {
    color: var(--text-color);
    @include typography.font-bold;
  }
}
.section-nav-item-completion {
  position: relative;

  background: var(--bg-color) !important;
  padding: 0 !important;
  border-radius: 100%;
  height: 50px;
  width: 50px;
  display: grid !important;
  place-items: center;
  &-label {
    position: absolute;
    z-index: 4;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    display: grid;
    place-items: center;
    font-size: typography.$smallish-font;
  }
  svg {
    display: block;
    position: relative;
    z-index: 3;
    height: 80%;
    width: 80%;
    // left: 0;
    // bottom: 0;
    // right: 0;
    // top: 0;
  }
}

.section-nav-hidden {
  > .section-nav-inner > button {
    background-image: linear-gradient(
      to right,
      hsl(0 0% 100% / 0.2) calc(1% * var(--completion-percentage)),
      transparent 0
    );
  }
}

@include breakpoints.xlarge {
  .section-nav-head {
    display: none !important;
  }

  .section-nav-hidden {
    .section-nav-contents {
      display: block;
    }
  }
  .section-nav {
    position: relative;
    padding-top: variables.$spacing * 5;
    padding-bottom: variables.$spacing * 2;
    padding-left: variables.$spacing * 2;
    padding-right: variables.$spacing * 2;
    margin-bottom: variables.$spacing;
  }
  .section-nav-items {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    column-gap: variables.$spacing;

    &::after {
      display: block;
      content: " ";
      height: 1px;
      width: auto;
      background-color: var(--dark-border-color);
      position: absolute;
      left: 30px;
      right: 30px;
      top: 50%;
      z-index: 1;
    }
  }

  .section-nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
  }

  .section-nav-item-link {
    display: grid !important;
    place-items: center;
    &,
    &:hover {
      // position: static;
    }
  }
  .section-nav-item-label {
    rotate: -45deg;
    transform-origin: bottom left;
    white-space: nowrap;
    top: -22px;
    left: calc(100% + 15px);
    position: absolute;
    font-size: typography.$smallish-font;
  }
}

// .section-nav {
//     // background: $bg-color-light;
//     // padding: $spacing;
//     @include large {
//       max-width: 280px;
//     }
//     ul {
//       list-style-type: none;
//       padding: 0;
//     }
//     a {
//       @include font-regular;
//     }
//     .active {
//       @include font-bold;
//       // color: $contrast-color;
//     }
//     li {
//       font-size: $medium-font;
//       margin-bottom: math.div($spacing, 4);
//       &:last-child {
//         margin: 0;
//       }
//     }
//   }
//   .section-nav-inner {
//     position: relative;
//   }
//   .section-nav-loading {
//     position: absolute;
//     top: 0px;
//     left: 0px;
//     right: 0px;
//     bottom: 0px;
//     background: rgba(255, 255, 255, 0.2);
//     display: grid;
//     place-items: center;
//     backdrop-filter: blur(5px);
//   }
//   .section-nav-heading {
//     font-size: $large-font;
//     margin-bottom: $spacing;
//     @include small-medium {
//       text-align: center;
//     }
//     @include large {
//       border-bottom: $border;
//       padding-bottom: $spacing;
//     }
//     img {
//       width: 100%;
//     }
//   }
//   .section-nav-head {
//     @include small-medium {
//       @include flex-center;
//       display: flex !important;
//       margin-bottom: $spacing;
//       width: 100%;
//       justify-content: space-between;
//       align-items: center;
//     }
//     @include large {
//       display: none !important;
//     }
//   }
//   .section-nav-head-left {
//     display: flex !important;
//     align-items: center;
//     gap: 8px;
//     line-height: 1;
//   }
//   .section-nav-toggle {
//     font-size: $medium-font;
//     @include large {
//       display: none;
//     }
//   }

//   .section-nav-contents {
//     @include small-medium {
//       margin-top: -$spacing - 1px;
//       @include border;
//       @include border-radius;
//       padding: $spacing;
//       margin-bottom: $spacing;
//     }
//   }
//   .section-nav-toc {
//     font-size: $medium-font;
//     margin: 0;
//     @include small-medium {
//       display: block;
//     }
//     @include large {
//       display: none;
//     }
//   }
//   .completion-message {
//     font-size: $small-font;
//     margin: $spacing 0 0 0;
//   }
//   .section-nav-completion,
//   .section-nav-item-completion {
//     @include font-regular;
//     @include primary-font;
//     color: $text-color;
//   }
