.round   { .radius(@round); }
.rounder { .radius(@rounder); }

// Space between sidebar and chat
div[class^="sidebar-"] {
  margin-right: @div-width;
}

// Old-school

div[class^="repliedMessage-"] {
  &::before {
    margin: 0;
    border: none;
    width: 4px;
    border-radius: 2px;
    background: var(--interactive-muted);
    left: 0; right: 100%;
    top: 0; bottom: 0;
  }
  & > img {
    margin-left: 16px;
  }
}

div[class^="role-"] {
  &:extend(.rounder);
  padding: 0;
  border-width: 2px;
  border-style: solid;
}

[class*="embed"] {
  .left-border(3px);
  max-width: unset;
  background: unset;
}

div[class^="statusItem-"] foreignObject,
rect[class^="pointerEvents-"],
{
  mask: url(#svg-mask-status-online);
}

// Round
  // UI parts
  li[class^="channel-"],
  [class^="avatar-"],
  [role="dialog"],
  div[class^="menu-"] [role="menuitem"],
  div[class^="colorPicker"] div div[class^="saturation"] div,
  #channels ul li div > div[class^="content-"],

  // Input
  div[class^="searchBox-"],
  [class*="input"],
  input[class^="inputDefault-"],
  div[class*="TextArea"],
  textarea,
{ &:extend(.round); }

// Rounder
  // Popouts
  [class^="authBox"], // login
  [role="menu"],
  div[class*="popout"],
  div[class*="Popout"],
  div[class*="fullscreenOnMobile"],
  div[class*="root"] div[class^="flex-"],

  // UI parts
  div[class^="chat-"],
  div[class^="noticeRegion"] > div, // you have unsaved changes bottom bar
  [class^="resultsGroup-"], // search
  div[class^="auditLog-"],
  div[class^="auditLog-"] > div,

  div[class^="connectedAccount-"], // in profile
  div[class^="profileBanner"],
  div[class^="accountProfile"],

  div[class^="quickswitcher-"] input,

  div[class^="autocomplete-"], // input
  div[class^="pictureInPicture-"],

  div[class^="select-"],
  div[class^="messagesWrapper-"] div:not([class*="Inner"]):not([class^="filename"]),

  div[class^="layer-"] > div[class^="container-"],
  div[class^="base-"] div[class^="content-"] > div:nth-child(2),
  div[class^="guildList-"] div[class^="container-"],
  div[class^="container"] > div,
  div[class^="chat-"] > div[class^="content-"],
{ &:extend(.rounder); }

div[class^="auditLog"] {
  div[class^="headerExpanded-"]
  { .bottom-border(); }
  div[class^="changeDetails-"]
  { .top-border(); }
}

div[class^="messagesWrapper-"]
div[class^="message-"][class*="mentioned"]
{ .left-border(4px); }

// no shadows
section, header,
div[class^="content-"]::before,
div[class^="tabBody-"]::before
{ box-shadow: unset !important; }

// Pins
div[class^="messageGroupWrapper-"] {
  border: none;
  background: unset;
}

// Redesigned text input

div[class^="attachedBars-"],
div[class^="messagesWrapper-"] div[class*="Bar-"]:not([class^="newMessagesBar-"]) {
  bottom: 16px;
  padding: 0;
}

div[class^="attachedBars-"]
{ position: relative; }

div[class^="channelTextArea-"] {
  &[class*="channelTextAreaDisabled-"]
  button[class^="attachButton-"] {
    display: none;
  }

  & > div[class^="scrollableContainer-"] {
    background-color: unset;
    opacity: 1;

    button[class^="attachButton-"],
    div[class^="textArea-"],
    div[class^="buttons-"] {
      background-color: var(--background-secondary);
      border-radius: @roundest !important;
      margin: 0;
    }

    & > div[class^="inner-"]
    { padding: 0; }

    button[class^="attachButton-"] {
      padding: 8px;
      width: auto;
      height: auto;
      margin-right: 8px;
    }

    div[class^="textArea-"] {
      &:not([class*="textAreaDisabled-"])
      { .right-border(); }

      div > * { left: (@roundest / 2); }
    }

    div[class^="buttons-"] {
      height: auto; // to match input height
      & > * {
        align-items: center; // center buttons
      }
      .left-border();
    }
  }
}

[role="menu"],
[role="dialog"]:not([class^="focusLock-"]),
div[class^="focusLock-"] > div,
div[class^="channelHeader-"],
div[class^="layers-"] > div[class^="layer-"] div[class*="View-"],
div[class*="stickyHeader-"],
{
  &:extend(.acrylic all);
}

// status picker
#status-picker > div {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  #status-picker-online,
  #status-picker-idle,
  #status-picker-dnd,
  #status-picker-invisible {
    margin: 8px;
    & > div {
      padding: 0;

      // & > because svg has status- div
      & > div[class^="status-"],
      & > div[class^="description-"] {
        display: none;
      }
    }
    svg {
      width: 16px;
      height: 16px;
      margin-left: 4px;
    }
  }
  #status-picker-custom-status,
  div[class^="submenuContainer-"] {
    width: 100%;
  }
}

// new invite with splash style
div[id^="message-accessories-"] > div[class^="wrapper-"] {
  position: relative;
  div[class^="inviteSplash-"] {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    filter: brightness(50%);

    & ~ * {
      position: relative;
      z-index: 1;
    }
  }
}