#list-item-shortcuts {
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.2) !important;
  margin-bottom: 3px;
  padding-bottom: 10px;
}

/* dropdown tooltips */
div[data-testid='tooltip'] {
  padding: 9px 23px 10px 13px;
  background-color: var(--cb-darkest-gray-transparent);
  backdrop-filter: blur(8px);
  margin-top: -8px;
  font-size: var(--cb-font-size-small);

  min-height: 62px;

  & a {
    font-size: var(--cb-font-size-small);
    line-height: 20px;
  }

  & > div {
    max-height: unset;
  }

  & > div:not(:has(> *)) {
    /* visual tests drop down fix */
    min-height: 120px;
    background-color: transparent;
    font-size: var(--cb-font-size-small);
    white-space: wrap;
    max-width: 175px;
    box-shadow: none;
    line-height: unset;
    padding-top: 9px;
  }

  /* generated by augmented-ui */
  clip-path: polygon(
    -1px -1px,
    calc(100% - 18px) -1px,
    calc(100% - 18px) 0px,
    100% 18px,
    100% 18px,
    100% 18px,
    100% 18px,
    calc(100% + 1px) 18px,
    calc(100% + 1px) calc(60% - 15px),
    100% calc(60% - 15px),
    calc(100% - 15px) 60%,
    calc(100% - 15px) 60%,
    calc(100% - 15px) 60%,
    calc(100% - 15px) 60%,
    calc(100% - 15px) calc(100% + 1px),
    18px calc(100% + 1px),
    18px 100%,
    0px calc(100% - 18px),
    0px calc(100% - 18px),
    0px calc(100% - 18px),
    0px calc(100% - 18px),
    -1px calc(100% - 18px)
  );

  :is(body.yellow) & {
    /* fix for cropped (invisible) borders */
    border-left: 0.5px solid var(--cb-turquoise);
    border-right: 0.5px solid var(--cb-turquoise);
  }
  :is(body.darkRed) & {
    /* fix for cropped (invisible) borders */
    border-left: 0.5px solid var(--cb-red);
    border-right: 0.5px solid var(--cb-red);
  }
  :is(body.dark) & {
    /* fix for cropped (invisible) borders */
    border-left: 0.5px solid var(--cb-yellow-alt);
    border-right: 0.5px solid var(--cb-yellow-alt);
  }

  &::after {
    /* generated by augmented-ui */
    content: '';
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    clip-path: polygon(
      1px 1px,
      calc(100% - 19px) 1px,
      calc(100% - 18.5px) 1px,
      calc(100% - 1px) 18.5px,
      calc(100% - 1px) 19px,
      calc(100% - 1px) 19px,
      calc(100% - 1px) 19px,
      calc(100% - 1px) 19px,
      calc(100% - 1px) calc(60% - 16px),
      calc(100% - 1px) calc(60% - 15.5px),
      calc(100% - 16px) calc(60% - 0.5px),
      calc(100% - 16px) calc(60% - 1px),
      calc(100% - 16px) calc(60% - 1px),
      calc(100% - 16px) calc(60% - 1px),
      calc(100% - 16px) calc(100% - 1px),
      19px calc(100% - 1px),
      18.5px calc(100% - 1px),
      1px calc(100% - 18.5px),
      1px calc(100% - 19px),
      1px calc(100% - 19px),
      1px calc(100% - 19px),
      1px calc(100% - 19px),
      1px 1px,
      -1px 1px,
      -1px calc(100% + 1px),
      calc(100% + 1px) calc(100% + 1px),
      calc(100% + 1px) -1px,
      -1px -1px,
      -1px 1px,
      1px 1px
    );
  }
  :is(body.yellow) &::after {
    background-color: var(--cb-turquoise);
  }
  :is(body.dark) &::after {
    background-color: var(--cb-yellow-alt);
  }
  :is(body.darkRed) &::after {
    background-color: var(--cb-red);
  }
}

/* what's new label */
#list-item-whats-new span div {
  font-size: calc(var(--cb-font-size-small) - 1px);
  border-radius: 0;
  padding: 3px 11px;

  --crop: 9px;
  clip-path: polygon(
    var(--crop) 0,
    100% 0,
    100% calc(100% - var(--crop)),
    calc(100% - var(--crop)) 100%,
    0 100%,
    0 var(--crop)
  );

  color: var(--cb-black);

  :is(body.yellow) & {
    background-color: var(--cb-yellow-main);
  }
  :is(body.dark) & {
    background-color: var(--cb-yellow-alt);
  }
  :is(body.darkRed) & {
    background-color: var(--cb-red);
  }
}

/* what's new notification */
#root > div > div > a[href*='whats-new'] {
  border-radius: 0;
  border: 1px solid var(--cb-turquoise);
  border-left-width: 5px;
}

/* multiselect plugin */
body.yellow
  div[data-testid='tooltip']
  .multiselect
  :is(.menu-item span:first-child svg, #list-item-reset) {
  color: var(--cb-gray);
}
/* vision simulator % of users line */
div[data-testid='tooltip'] a span span span span + span {
  font-size: calc(var(--cb-font-size-small) - 1px);
}