/* logo */
.sidebar-header a:first-child + div {
  height: 45px;
  background-image: url('../logo/yellow.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;

  & a {
    color: rgba(255, 255, 255, 0);
  }

  & svg {
    opacity: 0;
  }

  :is(body.dark) & a:focus {
    border-color: var(--cb-turquoise);
  }
}

/* gear icon */
.sidebar-header button[title='Shortcuts'] {
  border-radius: 0;

  &:focus-visible {
    outline: none;
    border: 1px solid var(--cb-turquoise);
    color: var(--cb-turquoise);
  }

  &:hover {
    color: var(--cb-turquoise);
  }

  :is(body.darkRed, body.dark) & {
    color: var(--cb-turquoise);
  }
  :is(body.yellow) & {
    color: var(--cb-white);
  }
  :is(body.yellow) &:hover {
    color: var(--cb-turquoise);
  }
}

/* run tests button (play icon) */
#button-run-tests {
  --bg-color: transparent;
  :is(body.dark) & {
    color: var(--cb-turquoise);
  }
}

/* search field */
.search-field {
  --_transition-time: 0.2s;
  --_transparent-white: hsla(0, 0%, 100%, 0.7);
  --_transparent-red: hsla(3, 100%, 67%, 0.7);

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

  &::after {
    transition: background-color var(--_transition-time);

    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* generated by augmented-ui */
    clip-path: polygon(
      1px 11px,
      1px 10.5px,
      10.5px 1px,
      11px 1px,
      11px 1px,
      11px 1px,
      11px 1px,
      calc(100% - 1px) 1px,
      calc(100% - 1px) calc(100% - 11px),
      calc(100% - 1px) calc(100% - 10.5px),
      calc(100% - 10.5px) calc(100% - 1px),
      calc(100% - 11px) calc(100% - 1px),
      calc(100% - 11px) calc(100% - 1px),
      calc(100% - 11px) calc(100% - 1px),
      calc(100% - 11px) calc(100% - 1px),
      1px calc(100% - 1px),
      1px 11px,
      -1px 11px,
      -1px calc(100% + 1px),
      calc(100% + 1px) calc(100% + 1px),
      calc(100% + 1px) -1px,
      -1px -1px,
      -1px 11px,
      1px 11px
    );
  }

  :is(body.yellow) &::after {
    background-color: hsla(184, 100%, 50%, 0.4);
  }
  :is(body.yellow) &:has(#storybook-explorer-searchfield:focus)::after {
    background-color: var(--cb-turquoise);
  }

  :is(body.darkRed) &::after {
    background-color: hsla(3, 100%, 67%, 0.4);
  }
  :is(body.darkRed) &:has(#storybook-explorer-searchfield:focus)::after {
    background-color: var(--cb-red);
  }

  :is(body.dark) &::after {
    background-color: hsla(73, 100%, 68%, 0.4);
  }
  :is(body.dark) &:has(#storybook-explorer-searchfield:focus)::after {
    background-color: var(--cb-yellow-alt);
  }

  :is(svg, code) {
    transition: color var(--_transition-time);
  }
  :is(body.yellow) & :is(svg, code) {
    color: var(--_transparent-white);
  }
  :is(body.darkRed) & :is(svg, code) {
    color: var(--_transparent-red);
  }
  :is(body.dark) & :is(svg, code) {
    color: hsla(184, 100%, 50%, 0.7);
  }

  :is(body.yellow) &:has(#storybook-explorer-searchfield:focus) svg {
    color: var(--cb-white);
  }
  :is(body.darkRed) &:has(#storybook-explorer-searchfield:focus) svg {
    color: var(--cb-turquoise);
  }

  #storybook-explorer-searchfield {
    font-size: var(--cb-font-size-large);
    border-radius: 0;
    border: none;
    height: 36px;
    padding-left: 33px;
    padding-right: 36px;

    &::placeholder {
      transition: color var(--_transition-time);
    }
    &:focus::placeholder {
      color: hsla(0, 0%, 100%, 0.4);
    }
    :is(body.yellow) &::placeholder {
      color: var(--_transparent-white);
    }
    :is(body.darkRed) &::placeholder {
      color: var(--_transparent-red);
    }
  }

  & code {
    font-size: calc(var(--cb-font-size) - 1px);
    top: 9px;
  }

  /* search (magnifier) icon */
  & svg:first-child {
    width: 14px;
    height: 14px;
    top: 11px;
  }
  /* clear (cross) icon */
  & svg:last-child {
    width: 18px;
    height: 18px;
    top: 9px;
  }
}

/* collapse button */
button[data-action='collapse-root'] {
  font-size: var(--cb-font-size);
  padding-bottom: 2px;
  padding-top: 2px;
  border-radius: 1px;

  & > span:first-of-type {
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid;
    margin-top: 4px;
    margin-right: 8px;
  }

  :is(body.dark) &:focus-visible {
    box-shadow: 0 0 0 1px var(--cb-turquoise);
  }
}

/* expand all button */
button.sidebar-subheading-action {
  border-radius: 1px;

  & svg {
    width: 12px;
    height: 12px;
  }

  :is(body.dark) &:focus-visible {
    border-color: var(--cb-turquoise);
  }
}

/* components tree */
button.sidebar-item,
.sidebar-item > a {
  font-size: var(--cb-font-size);
}
.sidebar-item[data-selected='true'] {
  &,
  * {
    font-family: var(--cb-font-family-bold);
  }

  :is(body.dark) & {
    background-color: hsla(73, 100%, 68%, 0.12);
  }

  :is(body.yellow, body.darkRed) &,
  :is(body.yellow, body.darkRed) & svg {
    color: var(--cb-black);
  }
  :is(body.dark) & {
    color: var(--cb-yellow-alt);
  }
  :is(body.dark) & svg {
    color: var(--cb-turquoise);
  }
  :is(body.dark) & a[id$='--docs'] svg {
    color: var(--cb-yellow-alt);
  }

  & a:first-child svg {
    margin-left: -2px;
  }

  & svg {
    width: 15px;
    height: 15px;
  }

  /* skip to canvas */
  & a + a {
    border-radius: 0;
    padding: 2px 12px;

    --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)
    );
  }
  :is(body.yellow) & a + a {
    background-color: var(--cb-yellow-main);
    color: var(--cb-black);
  }
  :is(body.darkRed) & a + a {
    background-color: var(--cb-red);
    color: var(--cb-white);
  }
  :is(body.dark) & a + a {
    background-color: var(--cb-yellow-alt);
    color: var(--cb-black);
  }
}
/* expand button */
.sidebar-item span {
  border-top-width: 4px;
  border-bottom-width: 4px;
  border-left-width: 4px;
}
/* item icon */
a[id$='--docs'] {
  :is(body.yellow) & svg {
    color: var(--cb-yellow-main);
  }
  :is(body.darkRed) & svg {
    color: var(--cb-green);
  }
  :is(body.dark) & svg {
    color: var(--cb-yellow-alt);
  }
}
body.dark button[data-nodetype='group'] svg,
body.dark button[data-nodetype='component'] svg {
  color: var(--cb-turquoise);
}

/* recently opened */
div.search-result-recentlyOpened {
  font-size: var(--cb-font-size);
  letter-spacing: 3.85px;
}
#storybook-explorer-menu li {
  & button,
  & a {
    font-size: var(--cb-font-size);
  }

  /* no components found */
  & div :is(strong, small) {
    font-size: var(--cb-font-size);
  }
  & div strong {
    font-family: var(--cb-font-family-bold);
  }
  :is(body.dark) & div small {
    color: var(--cb-white);
  }
}
div.search-result-item--label *,
li.search-result-back *,
li.search-result-clearHistory * {
  font-size: var(--cb-font-size-small);
}
li.search-result-item {
  & svg {
    margin-top: 4px;
  }

  :is(body.yellow) & a svg {
    color: var(--cb-yellow-main);
  }
  :is(body.darkRed) & a svg {
    color: var(--cb-green);
  }
  :is(body.dark) & a svg {
    color: var(--cb-yellow-alt);
  }
  :is(body.dark) button svg {
    color: var(--cb-turquoise);
  }
}

/* skip to canvas in top of sidebar */
nav.sidebar-container .sidebar-header a[href='#storybook-preview-wrapper'] {
  font-size: var(--cb-font-size);
  box-shadow: none;
  border-radius: 0;

  /* generated by augmented-ui */
  clip-path: polygon(
    -1px 6px,
    25px 6px,
    35px 1px,
    35px 1px,
    35px 1px,
    35px 1px,
    35px -1px,
    calc(100% - 35px) -1px,
    calc(100% - 35px) 1px,
    calc(100% - 25px) 6px,
    calc(100% - 25px) 6px,
    calc(100% - 25px) 6px,
    calc(100% - 25px) 6px,
    calc(100% + 1px) 6px,
    calc(100% + 1px) calc(100% - 7px),
    calc(100% - 25px) calc(100% - 7px),
    calc(100% - 35px) calc(100% - 1px),
    calc(100% - 35px) calc(100% - 1px),
    calc(100% - 35px) calc(100% - 1px),
    calc(100% - 35px) calc(100% - 1px),
    calc(100% - 35px) calc(100% + 1px),
    10px calc(100% + 1px),
    10px 100%,
    0px calc(100% - 7px),
    0px calc(100% - 7px),
    0px calc(100% - 7px),
    0px calc(100% - 7px),
    -1px calc(100% - 7px)
  );

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

/* border right */
body.dark .sidebar-container::after {
  content: '';
  position: absolute;
  background-color: var(--cb-yellow-alt);
  width: 2px;
  right: 0;
  top: 73px;
  bottom: 0;
}