@use 'backend' as *;

#{c(sidebar private channels)} {
  background: hsl(from cv('shading.bg') h s l/calc(cv('shading.percent') * 0.2));
}
#{c(sidebar private scroller)} {
  background: transparent;
  margin-bottom: var(--custom-app-panels-height, 0);
}

// HEADER
#{c(sidebar private headerContainer)} {
  &,
  &:not(#{c(sidebar private tall)}):hover {
    color: cv('color.main');
  }
}
#{c(sidebar private headerText)} {
  display: flex;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  align-items: center;
  &::before {
    content: '';
    height: 2px;
    flex-grow: 1;
    background: linear-gradient(to left, currentColor 50%, transparent);
    margin-right: 5px;
  }
  &::after {
    content: '';
    height: 2px;
    flex-grow: 1;
    background: linear-gradient(to right, currentColor 50%, transparent);
    margin-left: 5px;
  }
}
#{c(sidebar private startActivityIcon)},
#{c(sidebar private inviteButtonIcon)} {
  color: cv('color.main');
  &:hover {
    color: cv('color.hover');
  }
}

// LOADING
#{c(sidebar private loadingEmpty)} {
  fill: cv('text.normal');
  opacity: 0.15;
}

// CHANNEL CONTENT
#{c(sidebar private interactive)} {
  transition: all 0.15s ease-in-out;
  border-radius: 4px;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    right: 100%;
    bottom: 0;
    left: 0;
    transition: all 0.15s ease-in-out;
    z-index: -1;
    border-radius: 4px;
  }
  // HOVER
  &:hover {
    background: cv('shading.hover');
  }
  // SELECTED
  &#{c(sidebar private selected)} {
    background-color: transparent;
    color: var(--interactive-active);
    &::before {
      right: 0;
      background: cv('color.main');
      animation: cv-channel-select 0.3s ease-in-out;
    }
    #{c(sidebar private activityText)} {
      color: var(--interactive-active);
      strong {
        color: var(--interactive-active);
      }
    }
  }
}
