@use 'backend' as *;

// FOCUS
#{c(main keyboardMode)} {
  #{c(guildList focusStroke)} {
    stroke: var(--focus-color);
    stroke-width: 4px;
  }
}

// GUILD LIST
#{c(guildList guilds)} {
  margin-bottom: var(--custom-app-panels-height);
  background: transparent;
  padding-top: 10px;
}

// PILL
#{c(guildList pillItem)} {
  box-shadow: 0 0 3px 1px cv('color.main');
}
#{c(guildList pillDiscover)} {
  bottom: 0;
}

// HOME BUTTON
#{c(guildList homeWrapper)} {
  background-color: cv('shading.card');
  > svg {
  // > so it wont affect group dms
    width: 100%;
    height: 100%;
    background: cv('home.icon') center/cv('home.size') no-repeat;
  }
  path {
    display: none;
  }
}
#{c(guildList iconWrapper)} {
  &:hover {
    #{c(guildList homeWrapper)} {
      background-color: cv('color.hover');
    }
  }
  &#{c(guildList selected)} {
    #{c(guildList homeWrapper)} {
      background-color: cv('color.main');
    }
  }
}

// GUILD ICON
#{c(guildList guildIcon)} {
  background-color: cv('shading.card');
}

// ADD GUILD/DISCOVER BUTTONS
#{c(guildList bottomButton)} {
  background-color: cv('shading.card');
  &#{c(guildList bottomButtonSelected)} {
    background: cv('color.main');
  }
  &:hover {
    &:not(#{c(guildList bottomButtonDisabled)}) {
      background: cv('color.hover');
    }
  }
}

// NEW MENTION
#{c(guildList mention mention)} {
  background: cv('color.main');
  border-radius: 5px;
  &:active {
    background: cv('color.main');
  }
}

// UPPERBADGE
#{c(guildList iconBadge)} {
  background: cv('shading.popout');
  &#{c(guildList participating)} {
    background: cv('color.main');
  }
}
