@use '@vizality' as vz;

// @todo Don't forget to replace this image and move this to core Vizality styles.
:root {
  --vz-guild-empty-icon: url('https://discord.com/assets/6debd47ed13483642cf09e832ed0bc1b.png');
}

// Give label items with descriptions some breathing room
// so they don't crowd directly under switches
.note-2C4pGr {
  padding-right: 60px;
}

// You can still click group labels in context menus, but you shouldn't be.
// able to
.groupLabel-16o1xl {
  pointer-events: none;
}

[vz-guild-icon] .label-2gNW3x {
  display: flex;
  align-items: center;
  &::before {
    content: '';
    width: 20px;
    height: 20px;
    background: var(--vz-guild-icon, var(--vz-guild-empty-icon)) no-repeat center / contain;
    display: flex;
    border-radius: var(--vz-guild-border-radius, 50%);
    margin-right: 12px;
  }
}

// Better spacing for SearchBar component
// inside a context menu
.item-1OdjEX > .container-2oNtJn {
  padding: 2px 6px;
}

// Fixes height on embed footer text,
// specifically useful for embeds that
// input custom content into the footer
// with React
.embedFooterText-28V_Wb {
  display: flex;
  flex: 1;
}

// Show special tag for plugins and Vizality "clyde"
.message-2qnXI6 {
  &[vz-bot-plugin],
  &[vz-bot-vizality] {
    .botTag-2WPJ74 {
      &:not(.vz-bot-plugin-tag) {
        &:not(.vz-bot-vizality-tag) {
          display: none;
        }
      }
    }
  }
  &[vz-local] {  
    &:not([vz-bot-plugin]):not([vz-bot-vizality]) {
      .vz-bot-plugin-tag,
      .vz-bot-vizality-tag {
        display: none;
      }
    }
  }
}

// Remove the border-radius when there are multiple notices
.notice-3bPHh- {
  & + & {
    border-radius: 0;  
  }
}

/**
 * This is used for checkbox alignment (and possibly other areas). Discord has
 * the property set to align-items: top, which isn't a valid value.
 */
.alignTop-1ntJ4- {
  align-items: flex-start;
}
