```css
.role-2TIOKu {
  transform: translate(0);
  overflow: hidden;
  border-radius: 5px;
}
.role-2TIOKu .roleRemoveButton-17oXnT {
  position: static;
}
.role-2TIOKu .roleCircle-3TFUOr:after {
  content: '';
  top: 0;left: 0;
  z-index: -1;
  width: 100%;height: 100%;
  position: absolute;
  border-radius: 5px;
  background-image: linear-gradient(90deg, transparent, #000);
  background-color: inherit;
  opacity: .3;
}
:root {
    --guildicon-size: 38;
    --enable-if-using-favorites-experiment: 0;
    --guildicon-size-px: calc(var(--guildicon-size) * 1px);
}

.guilds-2JjMmN {
    width: calc((var(--guildicon-size) * 72px) / 48);
}

.tutorialContainer-1pL9QS+.listItem-3SmSlK {
    height: calc((var(--guildicon-size-px) * var(--enable-if-using-favorites-experiment)) + (2px * (1 - var(--enable-if-using-favorites-experiment))));
}

.tutorialContainer-1pL9QS+.listItem-3SmSlK+.listItem-3SmSlK {
    height: calc((var(--guildicon-size-px) * (1 - var(--enable-if-using-favorites-experiment))) + (2px * var(--enable-if-using-favorites-experiment)));
}

.listItem-3SmSlK {
    height: var(--guildicon-size-px);
    width: calc((var(--guildicon-size) * 72px) / 48);
    margin-bottom: calc((var(--guildicon-size) * 8px) / 48);
}

.listItem-3SmSlK .wrapper-z5ab_q,
.listItem-3SmSlK .pill-2RsI5Q {
    height: calc((var(--guildicon-size) * 48px) / 48);
    width: calc((var(--guildicon-size) * 8px) / 48);
}

.listItem-3SmSlK .pill-2RsI5Q {
    overflow: visible;
}

.listItem-3SmSlK .wrapper-2PSQCG,
.listItem-3SmSlK .wrapper-2PSQCG .svg-2ifYOU {
    height: var(--guildicon-size-px);
    width: var(--guildicon-size-px);
}

.wrapper-38slSD>ul {
    height: auto !important;
}

.wrapper-38slSD {
    width: var(--guildicon-size-px);
}

.wrapper-38slSD .expandedFolderBackground-1kSAf6 {
    left: calc((var(--guildicon-size) * 12px) / 48);
    bottom: calc((var(--guildicon-size) * 8px) / 48);
    width: calc(var(--guildicon-size) * 1px);
    border-radius: calc((var(--guildicon-size) * 16px) / 48);
}
:root{
  --roles-roundness: 0; /* change the 0 to any other number if you want the roles to be fully round */

  --roles-roundness-calc: calc((var(--roles-roundness) + .21) * 25px)
}
.role-2TIOKu {
  transform: translate(0);
  border: 0;
  border-radius: var(--roles-roundness-calc);
}
.role-2TIOKu .roleRemoveIcon-387wKV {
  margin: 0;
  left: unset;
  transform: translate(50%,-50%);
}
.role-2TIOKu .roleRemoveButton-17oXnT{position: static}
.role-2TIOKu .roleCircle-3TFUOr:before {
  content: '';
  top: 0;left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: absolute;
  background: inherit;
  border-radius: var(--roles-roundness-calc);
  border: 2px solid transparent;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
}
```