// UI element changes

// slider
div[class^="slider-"] {
  div[class^="track-"] {
    div[class^="grabber-"] {
      @half: (@rounder / 2);
      position: relative;
      width: @rounder;
      height: @rounder;
      border: none;
      .radius(@half);
      top: @half * 1.5;
      margin-top: unset;
      margin-left: -@half;
    }
  }
}

// tabs
div[role="tab"],
div.tabBarItem-30Te4- {
  .top-border(16px)   !important;
  .bottom-border(4px) !important;
  margin: 0;
  margin-top: 8px;
  margin-right: 16px;
  padding: 4px 8px;

  &:hover,
  &.selected-g-kMVV {
    background-color: var(--interactive-muted) !important;
    color: var(--text-normal) !important;
  }

  div.textBadge-1fdDPJ {
    margin-left: 4px;
  }
}

// slider
div.bd-switch-body,
div[class^="container-"] {
  &:extend(.rounder);

  &[class*="disabled"] {
    cursor: not-allowed;
  }

  & > svg[class*="slider"] {
    width: 16px  !important;
    height: 16px !important;
    .radius(50%);
    margin: 4px 8px;
    margin-right: 0;
    background-color: white;

    & > * {
      display: none;
    }
  }
}

div[class^="radioBar-"] {
  border: none;
}

div[class^="card-"],
div.bd-server-card {
  & > div[class*="header"],
  & > div[class*="Header"] {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;

    div[class^="coverWrapper"],
    div[class^="splash"] {
      filter: brightness(0.5);
    }
    .bd-server-icon,
    & > div[class*="icon"],
    & > div[class*="Icon"] {
      position: relative;
      width: 42px;
      height: 42px;
      overflow: hidden;
      padding: 5px;
    }
  }
  & > div[class*="info"],
  & > div[class*="Info"] {
    margin-top: 84px;
  }
}

// Round
div[class^="tabBarItem-"],
div[class^="checkbox"],
button[class*="button"],
code.inline,
{ &:extend(.round); }

// Rounder
div[class^="markup-"] pre code, // ```code```
span[class^="spoiler"],
span.mention,
[class^="item-"], // in settings
div[class^="group-"], // radiogroup
div[class*="card"],
div[class^="categoryItem-"] > *, // in Discovery
div[class^="content-"] img[class^="image-"],
{ &:extend(.rounder); }