@import '../../styles/colors.scss';

nav {
  .nav-item {
    width: calc(100% - 1px);
    height: 61px;
    font-weight: 600;
    display: flex;
    align-items: center;
    padding-left: 14px;
    text-decoration: none;
    cursor: pointer;

    p {
      color: $color-text-dimmed;
      width: calc(100% - 50px);
    }

    .nav-icon {
      margin-right: 8px;
    }

    .nav-indicator{
      visibility: hidden;
      margin-left: auto;
      margin-right: 20px;
    }

    &:before {
      content: '';
      height: 50px;
      background-color: $primary-color-main;
      width: 4px;
      border-radius: 0 10px 10px 0;
      position: absolute;
      left: 0;
      opacity: 0;
    }

    &:hover {
      background-color: $color-gray0;
    }

    .arrow {
      display: none;
    }
  }

  .active {
    background-color: $color-gray0;
    p {
      color: $color-text-default;
    }
    mat-icon svg {
      fill: $primary-color-main;
    }
    .arrow {
      display: block;
      text-align: right;
      padding-right: 20px;
      width: 50px;
      color: $color-text-default;
    }
  }

  .active:before, .nav-item:hover:before {
    opacity: 1;
    transition: opacity 300ms ease-in-out;
    -webkit-transition: opacity 300ms ease-in-out;
    -moz-transition: opacity 300ms ease-in-out;
    -ms-transition: opacity 300ms ease-in-out;
    -o-transition: opacity 300ms ease-in-out;
  }

}