.onboarding {
  background-color: $bg-light200;
  nav {
    display: none;
  }
  .butter-bar {
    display: none;
  }
}
nav a {
  font-weight: 500;
  &.active {
    font-weight: bold;
  }
}
.nav-sub-link-disabled {
  cursor: not-allowed;
  span {
    opacity: 0.5;
  }
}
.nav-sub-link {
  color: $body-color;
  &-inner {
    padding: 4px;
    border-radius: $border-radius;

    &:hover {
      background-color: $primary-alfa-8;
    }
  }
  &:hover {
    svg {
      path {
        fill: $link-hover-color;
      }
    }
  }
  svg {
    width: 14px;
    height: 14px;
    opacity: 0.6;
    path {
      fill: $body-color;
    }
  }
  ion-icon {
    opacity: 0.6;
    font-size: $font-size-base;
  }
  &.active {
    border-bottom: 2px solid $primary;
  }
}
.breadcrumb-link {
  padding: 4px 8px 4px 8px;
  border-radius: $border-radius;
  &:hover,
  &.hovered {
    color: $body-color;
    background-color: $primary-alfa-8;
  }
}
.dark {
  .breadcrumb-link:hover,
  .breadcrumb-link.hovered {
    color: $body-color-dark;
  }
  .nav-sub-link {
    &-inner {
      &:hover {
        color: $body-color-dark;
      }
    }
    svg {
      path {
        fill: $body-color-dark;
      }
    }
  }
}
.border-1 {
  border: 1px solid $hr-border-color;
}
.border-right {
  border-right: 1px solid $hr-border-color;
}
@include media-breakpoint-up(md) {
  .border-md-right {
    border-right:  1px solid $hr-border-color;
  }
}
.collapsible__content {
  svg,
  ion-icon {
    text-align: center;
    width: 16px;
    height: 16px;
    color: $body-color;
    opacity: 0.6;
    path {
      fill: $body-color;
    }
  }
  ion-icon {
    font-size: $font-size-base;
  }
}
.collapsible-title {
  line-height: 32px;
  cursor: pointer;
  border-radius: $border-radius;
  &:hover {
    color: $primary;
    background-color: $primary-alfa-8;
  }
}
.collapsible.active {
  .collapsible-title {
    pointer-events: none;
  }
}
.fill-body {
  svg {
    path {
      fill: $body-color;
    }
  }
}
.fill-primary {
  svg {
    path {
      fill: $primary;
    }
  }
}

@include media-breakpoint-down(md) {
  .nav-sub-link {
    border-bottom: none !important;
    &.active {
      color: $primary;
      path {
        fill: $primary;
      }
    }
  }
  .nav-modal {
    left: -50px;
    width: calc(100vw);
  }
}

.dark {
  .fill-body {
    svg {
      path {
        fill: $body-color-dark;
      }
    }
  }
}
