@use 'backend' as *;

// NEW CHANNEL BADGE
#{c(sidebar server channels newChannelBadge)} {
  background: cv('color.main') !important; //inline
  color: var(--header-primary);
}

// CHANNELS BACKGROUND
#{c(sidebar list)} {
  border-top-left-radius: 10px;
  border: none;
  backdrop-filter: none;
}
#{c(sidebar server container)} {
  background: hsl(from cv('shading.bg') h s l/calc(cv('shading.percent') * 0.2));
}

// HEADER - COMMUNITY/BANNER
#{c(sidebar server header bannerContainer)} {
  background-color: transparent;
  border: none;
}

// UNREAD PILL
#{c(sidebar server channels unreadPill)} {
  box-shadow: 0 0 6px 1px cv('color.main');
}

// UNREAD BAR
#{c(sidebar server unreadBar bar)},
#{c(sidebar server unreadBar old bar)} {
  background-color: cv('color.main');
  border-color: cv('color.main');
}
#{c(sidebar server unreadBar unreadIcon)},
#{c(sidebar server unreadBar text)} {
  color: var(--interactive-active) !important; //inline style
}

// THREAD SPINE
#{c(sidebar server channels threadsSpineBorder)} {
  background-color: cv('color.main');
}
#{c(sidebar server channels threadsSpine)} {
  color: cv('color.main');
}

// CHANNEL
#{c(sidebar server channels link)} {
  transition: all 0.15s ease-in-out;
  margin-left: 4px;
  &::before {
    top: 0;
    right: 100%;
    bottom: 0;
    left: 0;
    transition: all 0.15s ease-in-out;
    z-index: -1;
    border-radius: 4px;
  }
}
#{c(sidebar server channels icon)} {
  width: 18px;
  height: 18px;
  margin-right: 3px;
  transition: all 0.15s ease-in-out;
  color: var(--hsl-channel-normal);
}
#{c(sidebar server channels name)} {
  transition: all 0.15s ease-in-out;
  color: var(--hsl-channel-normal);
}
#{c(sidebar server channels wrapper)} {
  // MUTED
  &#{c(sidebar server channels muted)} {
    #{c(sidebar server channels name)},
    #{c(sidebar server channels icon)} {
      color: var(--hsl-channel-muted);
    }
  }

  // HOVER
  &:hover,
  &#{c(sidebar server channels muted)}:hover {
    #{c(sidebar server channels link)} {
      background: cv('shading.hover');
    }
    #{c(sidebar server channels name)},
    #{c(sidebar server channels icon)} {
      color: var(--hsl-channel-hover);
    }
  }

  // UNREAD
  &#{c(sidebar server channels unread)} {
    #{c(sidebar server channels name)} {
      color: var(--hsl-channel-unread);
      text-shadow: 0 0 3px;
    }
    #{c(sidebar server channels icon)} {
      color: var(--hsl-channel-unread);
      filter: drop-shadow(0 0 3px);
    }
    &:hover {
      :is(#{c(sidebar server channels name)}, #{c(sidebar server channels icon)}) {
        color: var(--hsl-channel-unread-hover);
      }
    }
  }

  // SELECTED
  &#{c(sidebar server channels selected)} {
    #{c(sidebar server channels link)} {
      background-color: transparent;
      &::before {
        right: 0;
        background: var(--hsl-channel-selected-bg);
        animation: cv-channel-select 0.3s ease-in-out;
      }
    }
    #{c(sidebar server channels name)},
    #{c(sidebar server channels icon)} {
      color: var(--hsl-channel-selected);
    }
  }

  // CONNECTED
  &#{c(sidebar server channels connected)} {
    #{c(sidebar server channels name)} {
      color: cv('color.main');
      text-shadow: 0 0 3px;
    }
    #{c(sidebar server channels icon)} {
      color: cv('color.main');
      filter: drop-shadow(0 0 3px);
    }
  }
}

// VC USER LIMIT
#{c(sidebar server channels voiceLimitWrapper)},
#{c(sidebar server channels voiceLimitUsers)} {
  background: transparent;
}
#{c(sidebar server channels voiceLimitUsers)} {
  padding: 0 8px 0 6px;
}
#{c(sidebar server channels voiceLimitTotal)} {
  padding: 0 6px 0 1px;
}

// VC Highlights / etc
// VOICE USER LIST
#{c(sidebar server channels voice listGeneric)} {
  padding-left: 24px;
}

#{c(sidebar server channels voice user)} {
  z-index: 1;
  #{c(sidebar server channels voice userContent)} {
    border-radius: 3px;
    transition: all 0.15s ease-in-out;
  }
  #{c(sidebar server channels voice avatarSpeaking)} {
    box-shadow: 0 0 0 2px cv('color.main'), inset 0 0 3px rgba(0, 0, 0, 0.5);
    position: relative;
    transition: all 0.1s ease-in-out;
    &:after {
      content: '';
      top: -2px;
      bottom: -2px;
      width: 150px;
      position: absolute;
      height: 1.8em;
      background: linear-gradient(to right, cv('color.main') 10%, transparent);
      opacity: 0.5;
      transition: all 0.1s ease-in-out, width 0.15s ease-in-out;
      pointer-events: none;
      z-index: -1;
      border-radius: 999px 0 0 999px;
    }
  }
  #{c(sidebar server channels voice username)} {
    color: hsla(0, 0%, 100%, 0.5);
    transition: all 0.1s ease-in-out;
  }
  #{c(sidebar server channels voice usernameSpeaking)} {
    color: #fff;
  }
}