@import url("main.css");

.side-bar {
  position: absolute;
  top: 0px;
  left: 0%;
  width: 22.5vw;
  max-width: 357px;
  height: 100%;
}

.sidebar-menustory {
    display: flex;
    flex-direction: column;
    gap: var(--ws-2);
}

.sidebar-overflow {
  overflow-y: scroll;
  height: 65%;
  padding: var(--ws-1) 0px;
}

.sidebar-overflow::-webkit-scrollbar {
  display: none;
}

.side-bar-header {
  padding: var(--ws-2);
  height: 80px;
}


.side-bar-logo img {
  width: 45%;
}

.side-bar-wrapper {
  gap: var(--ws-1);
}

.side-bar-content {
  padding: var(--ws-1) var(--ws-2);
  /* margin-top: var(--ws-2); */
}

#pink-bg {
  background: var(--tint-red-clr);
}
#blue-bg {
  background: var(--tint-blue-clr);
}

.sidebar-nav-wrapper {
  padding: var(--ws-1) var(--ws-2);
}

.sidebar-nav-indicator {
  width: 5px;
  height: 5px;
  background-color: var(--red-clr);
  border-radius: var(--br-auto);
  display: none;
}

.sidebar-nav-content {
  padding: var(--ws-2);
  border-radius: var(--br-auto);
  transition: ease-in-out 0.4s;
}

.sidebar-nav-content:hover {
    background: var(--tint-red-clr);
}

.sidebar-title-text {
  color: var(--tint-text-clr);
}

.sidebar-nav-content:hover .sidebar-title-text {
  color: var(--dark-clr);
}

.sidebar-nav-wrapper.is-active .sidebar-nav-content .sidebar-nav-indicator {
  display: block;
}

.sidebar-nav-wrapper.is-active .sidebar-nav-content {
  background: var(--tint-red-clr);
}

.sidebar-nav-wrapper.is-active .sidebar-nav-content svg path {
  fill: var(--red-clr);
}

.sidebar-nav-wrapper.is-active .sidebar-nav-content .sidebar-title-text {
  color: var(--dark-clr);
}

@media (max-width: 357px) {
  .side-bar {
    width: 100%;
  }
}


