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

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

  @media (min-width: map_get($grid-breakpoints, lg))
  and (min-height: $screen-lg-height), (max-width: map_get($grid-breakpoints, md) - 1px) {
    font-size: 13px;
  }

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

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

  > a,
  > div a {
    align-items: center;
    position: relative;
    padding-left: 50px;
    line-height: 35px;
    border-top: 1px 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) {
      line-height: 55px;
    }

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

  .icon {
    font-size: $font-size-larger;
    display: block;
    position: absolute;
    top: 3px;
    left: 11px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    opacity: .6;

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

  .badge {
    float: right;
    line-height: 8px;
    margin-top: 6px;
    margin-right: 15px;
    padding: 7px;

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

.nav-link-nested > a {
  font-size: $font-size-sm;
  font-weight: $font-weight-normal;
  line-height: 32px !important;
}

.headerLabel {
  font-weight: 600;
}

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

  i {
    @include transition(transform 0.3s ease-in-out);
  }
}

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

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