// UI element changes

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

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

  &:hover,
  &[class*="selected-"] {
    background-color: var(--interactive-muted) !important;
    color: var(--text-normal) !important;
  }
}

// slider
div[class^="container-"] {
  &[class*="disabled-"] {
    cursor: not-allowed;
  }

  svg[class^="slider-"] {
    width: 16px  !important;
    height: 16px !important;
    border-radius: 50%;
    margin: 4px 8px;
    margin-right: 0;
    background-color: white;

    > * {
      display: none;
    }
  }
}

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

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

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