apps/barista-design-system/src/pages/single-page/components/sidenav/sidenav.scss
@import '../../../../../libs/barista-components/core/src/style/colors';
@import '../../../../styles/global/variables';

:host {
  display: none;
}

@media (min-width: $screen-xxl) {
  :host {
    display: block;
    grid-area: sidenav;
  }
}

.ba-sidenav-section {
  margin-top: 3rem;
  margin-bottom: 4rem;
}

.ba-sidenav-section-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ba-pagetheme-dark);
}

.ba-sidenav-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 44px;
  padding-left: 20px;
  padding-right: 4rem;
  width: 100%;
  text-align: right;
}

.ba-sidenav-item-headline {
  color: $gray-700;
  display: block;
  font-size: 15px;
  line-height: 1.4;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ba-sidenav-item:hover {
  text-decoration: none;

  .ba-sidenav-item-headline {
    color: $turquoise-600;
  }
}

.ba-sidenav-item.ba-sidenav-item-active {
  background-color: $gray-100;
}

.ba-sidenav-item.ba-sidenav-item-active .ba-sidenav-item-headline {
  color: $textcolor;
  font-weight: 700;
}
