/*===============================
#.sidebar-area
=================================*/
.sidebar-area {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--white);
  height: 100%;
  border-radius: 1.5rem;
  padding: 3.5rem 2.5rem;
  .sidebar-menu {
    ul {
      margin: 0;
      padding: 0;
      li {
        list-style: none;
        margin-bottom: 1rem;
        &:last-child {
          margin-bottom: 0;
        }
        .nav-link {
          display: flex;
          align-items: center;
          min-height: 4.5rem;
          grid-column-gap: 1.6rem;
          padding: 1rem 2rem;
          background-color: var(--white);
          border-radius: 1rem;
          font-size: 1.4rem;
          font-weight: 600;
          color: var(--bColor);
          transition: all 0.2s;
          .menu-icon {
            display: flex;
            align-items: center;
            width: 2.4rem;
            height: 2.4rem;
            img {
              max-width: 100%;
              object-fit: cover;
            }
          }
          &:hover {
            background: rgba(9, 194, 105, 0.15);
            color: var(--primary-color);
            .menu-icon {
              img {
                filter: invert(27%) sepia(51%) saturate(2878%)
                  hue-rotate(477deg) brightness(104%) contrast(97%);
              }
            }
          }
          &.active-menu {
            background: rgba(9, 194, 105, 0.15);
            color: var(--primary-color);
            .menu-icon {
              img {
                filter: invert(27%) sepia(51%) saturate(2878%)
                  hue-rotate(477deg) brightness(104%) contrast(97%);
              }
            }
          }
        }
      }
    }
  }
  .log-out-btn {
    display: flex;
    align-items: center;
    min-height: 4.5rem;
    grid-column-gap: 1.6rem;
    padding: 1rem 2rem;
    background-color: var(--white);
    border-radius: 1rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--bColor);
    transition: all 0.2s;
    .menu-icon {
      display: flex;
      align-items: center;
      width: 2.4rem;
      height: 2.4rem;
      img {
        max-width: 100%;
        object-fit: cover;
      }
    }
    &:hover {
      background: rgba(9, 194, 105, 0.15);
      color: var(--primary-color);
      .menu-icon {
        img {
          filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(477deg)
            brightness(104%) contrast(97%);
        }
      }
    }
  }
}
