/* CHANNEL CATEGORY */
%categoryContainer {
  padding-top: 16px;
}
%categoryWrapper {
  padding-left: 10px;
  padding-right: 0;
  transition: all 0.3s ease-in-out;
}
%categoryIcon {
  display: none;
}
%categoryName {
  display: flex;
  align-items: center;
  justify-content: center;
  color: $main-color;
  font-weight: 700;
  text-align: center;
  transition: all 0.3s ease-in-out;
  opacity: 0.7;
  &:before {
    content: '';
    height: 2px;
    flex-grow: 1;
    transition: all 0.3s ease-in-out;
    background: linear-gradient(to left, $main-color 50%, transparent);
    margin-right: 5px;
  }
  &:after {
    content: '';
    height: 2px;
    flex-grow: 1;
    transition: all 0.3s ease-in-out;
    background: linear-gradient(to right, $main-color 50%, transparent);
    margin-left: 5px;
  }
  %categoryMain:hover & {
    opacity: 1;
  }
}
%channelsSidebar {
  %categoryContainer {
    %categoryWrapper {
      %categoryName {
        color: $main-color;
      }
    }
  }
}
%categoryButtons {
  margin-left: 3px;
}

// COLLAPSED
%categoryWrapperCollapsed {
  %categoryName {
    &:before,
    &:after {
      flex-grow: 0;
    }
  }
}

// MUTED
%categoryWrapperMuted {
  opacity: 0.5;
}

// ADD CHANNEL ICON
%categoryAddIcon {
  color: var(--main-color);
  opacity: 0.7;
  transition: all 0.3s ease-in-out;
  &:hover {
    color: var(--main-color);
    opacity: 1;
  }
}

// New Channel
.button-1kija8,
.buttonIcon-1TxM6f {
  color: var(--url-color);
}