@import '../../../styles/app';

.headerLink {
  width: 100%;
  overflow-x: hidden;
  font-weight: $font-weight-semi-bold;
  font-size: $font-size-larger;

  a {
    display: block;
    color: $sidebar-color;
    text-decoration: none;
    cursor: pointer;
  }

  &:last-child > a {
    border-bottom: 2px solid $sidebar-item-border-color;
  }

  > a,
  > div a {
    align-items: center;
    position: relative;
    padding-left: 50px;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1.3;
    border-top: 2px solid $sidebar-item-border-color;
    border-radius: $border-radius;

    > i {
      margin-right: 7px;
    }

    @media (min-width: map_get($grid-breakpoints, lg))
    and (min-height: $screen-lg-height), (max-width: map_get($grid-breakpoints, md) - 1px) {
      padding-top: 15px;
      padding-bottom: 15px;
    }

    &:hover {
      background-color: $addition-bg;
    }
  }

  .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 11px;
    width: 28px;
    height: 28px;
    color: currentColor;

    svg {
      width: 24px;
      height: 24px;
      fill: currentColor;
    }

    i {
      font-size: $font-size-larger;
      line-height: 28px;
    }
  }

  .badge {
    margin-left: auto;
    margin-right: 15px;
    padding: 5px 7px;
    line-height: 1;
  }
}

.nav-link-nested > a {
  font-size: $font-size-larger;
  font-weight: $font-weight-normal;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  line-height: 1.3 !important;
}

.headerLabel {
  font-weight: $font-weight-semi-bold;
}

.caretWrapper {
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: 15px;

  i {
    @include transition(transform $sidebar-transition-time ease-in-out);
  }
}

.caretActive i {
  transform: rotate(90deg);
}

a.router-link-active,
a.sidebar-link-active {
  &,
  &:hover {
    font-weight: $font-weight-bold !important;
    color: $header-color;
  }

  .icon {
    width: 32px;
    height: 32px;
    background-color: rgba($white, 0.2);
    border-radius: 50%;

    svg,
    i {
      color: $body-bg;
    }
  }
}

.sub-menu {
  padding-left: 0;
  list-style: none;
  margin: 0;

  .headerLink {
    > a,
    > div a {
      padding-left: 40px;
      border-top: none;
    }
  }
}
