#root div:has(> #storybook-panel-root) {
  /* remove top border of bottom panel */
  border-top: none;
}

/* top tabs */
#storybook-panel-root *[role='tablist'] .tabbutton {
  font-size: var(--cb-font-size);
  line-height: initial;
  transition: color 0.2s linear, background-color 0.2s linear;

  &:is(.tabbutton-active, :focus) {
    border-bottom-color: transparent;
  }

  &:focus-visible {
    outline: none;
  }

  &:has(span + div) {
    padding-right: 12px;
  }

  & span {
    transform: translateY(-1px);
  }

  :is(body.yellow) &.tabbutton-active {
    background-color: var(--cb-turquoise);
    color: var(--cb-black);

    &:focus-visible {
      border-color: var(--cb-red);
      color: var(--cb-black);
    }
  }
  :is(body.yellow) &:focus-visible {
    /* TODO: better change to outline - it won't mage layout shifts */
    border: 2px solid var(--cb-turquoise);
  }
}

/* Addons tab (right side panel) */
#storybook-panel-root *[role='tablist'] > div {
  & > .tabbutton span {
    margin-left: 10px;
    margin-top: 2px;
    border-width: 5px;
  }

  :is(body.yellow) & :is(.tabbutton, span) {
    color: var(--cb-white);
  }

  :is(body.yellow) & > .tabbutton:focus-visible > span {
    border-top-color: var(--cb-turquoise);
  }
}

#storybook-panel-root *[role='tablist']:not(:has(.tabbutton-active)) > div {
  > .tabbutton {
    background-color: var(--cb-turquoise);
    color: var(--cb-black);

    & span {
      border-top-color: var(--cb-black);
    }
  }
}

/* number badge */
#storybook-panel-root *[role='tablist'] {
  .tabbutton span + div {
    border-radius: 0;
    padding: 0;
    line-height: initial;
    font-size: var(--cb-font-size-small);
    color: var(--cb-black);
    background-color: var(--cb-white);
    padding-top: 7px;
    position: relative;
    transition: background-color 0.2s linear;

    /* generated by augmented-ui */
    width: 32px;
    height: 28px;
    clip-path: polygon(
      -1px 72.1688%,
      0px 72.1688%,
      35.7143% 0px,
      35.7143% 0px,
      35.7143% 0px,
      35.7143% 0px,
      35.7143% -1px,
      64.2857% -1px,
      64.2857% 0px,
      100% 72.1688%,
      100% 72.1688%,
      100% 72.1688%,
      100% 72.1688%,
      calc(100% + 1px) 72.1688%,
      calc(100% + 1px) 72.1688%,
      100% 72.1688%,
      86.2271% 100%,
      86.2271% 100%,
      86.2271% 100%,
      86.2271% 100%,
      86.2271% calc(100% + 1px),
      13.7729% calc(100% + 1px),
      13.7729% 100%,
      0px 72.1688%,
      0px 72.1688%,
      0px 72.1688%,
      0px 72.1688%,
      -1px 72.1688%
    );

    &:after {
      content: '';
      background-color: black;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

      /* generated by augmented-ui */
      clip-path: polygon(
        1px calc(72.1688% + 1px),
        1px calc(72.1688% + 0.5px),
        calc(35.7143% + 0.5px) 1px,
        calc(35.7143% + 1px) 1px,
        calc(35.7143% + 1px) 1px,
        calc(35.7143% + 1px) 1px,
        calc(35.7143% + 1px) 1px,
        calc(64.2857% - 1px) 1px,
        calc(64.2857% - 0.5px) 1px,
        calc(100% - 1px) calc(72.1688% + 0.5px),
        calc(100% - 1px) calc(72.1688% + 1px),
        calc(100% - 1px) calc(72.1688% + 1px),
        calc(100% - 1px) calc(72.1688% + 1px),
        calc(100% - 1px) calc(72.1688% + 1px),
        calc(100% - 1px) calc(72.1688% - 1px),
        calc(100% - 1px) calc(72.1688% - 0.5px),
        calc(86.2271% - 0.5px) calc(100% - 1px),
        calc(86.2271% - 1px) calc(100% - 1px),
        calc(86.2271% - 1px) calc(100% - 1px),
        calc(86.2271% - 1px) calc(100% - 1px),
        calc(86.2271% - 1px) calc(100% - 1px),
        calc(13.7729% + 1px) calc(100% - 1px),
        calc(13.7729% + 0.5px) calc(100% - 1px),
        1px calc(72.1688% - 0.5px),
        1px calc(72.1688% - 1px),
        1px calc(72.1688% - 1px),
        1px calc(72.1688% - 1px),
        1px calc(72.1688% - 1px),
        1px calc(72.1688% + 1px),
        -1px calc(72.1688% + 1px),
        -1px calc(100% + 1px),
        calc(100% + 1px) calc(100% + 1px),
        calc(100% + 1px) -1px,
        -1px -1px,
        -1px calc(72.1688% + 1px),
        1px calc(72.1688% + 1px)
      );
    }
  }

  :is(body.yellow)
    &
    :is(.tabbutton.tabbutton-active, .tabbutton:focus-visible)
    span
    + div {
    background-color: var(--cb-yellow-main);
  }
}

/* right side controls */
#storybook-panel-root div div div:last-child {
  & button {
    border-radius: 0;
  }
  svg {
    width: 16px;
    height: 16px;
  }

  :is(body.yellow) & button:focus-visible {
    outline: 1px solid var(--cb-turquoise);
  }
  :is(body.yellow) & :is(button:focus-visible, button:hover svg) {
    color: var(--cb-turquoise);
  }
}

/* sub tabs */
#panel-tab-content > div:nth-child(2) > div > div > div {
  > div:first-child button {
    font-size: var(--cb-font-size);

    & span {
      display: block;
      transform: translateY(-2px);
    }
  }

  > div:nth-child(2):has(label + input) label {
    font-size: var(--cb-font-size);
    color: var(--cb-white);
    transform: translateY(-1px);
  }
}

/* panel background */
#panel-tab-content,
#panel-tab-content > div:last-child,
#panel-tab-content > div:last-child button,
#panel-tab-content > div > div,
#panel-tab-content .docblock-argstable td {
  background-color: var(--cb-black);
}

/* panel border */
div:has(> #storybook-panel-root) {
  border: none;
}
body.dark #storybook-panel-root {
  border-top: 1px solid var(--cb-yellow-alt);
}

/* controls tab */
#storybook-panel-root #panel-tab-content .docblock-argstable {
  font-size: var(--cb-font-size);

  /* controls tab - raw button */
  & a:has(svg + span) {
    font-size: var(--cb-font-size-small);
    padding: 11px 8px;
    border-radius: 0;

    & span {
      margin-top: 0;
      margin-left: 6px;
    }
  }
  :is(body.yellow)
    &
    :is(a:has(svg + span):hover, a:has(svg + span):focus-visible) {
    outline: none;
    background-color: var(--cb-turquoise-transparent);
    color: var(--cb-turquoise);
  }
  :is(body.yellow) & a:has(svg + span):focus-visible {
    outline: 1px solid var(--cb-turquoise);
  }
}

/* controls tab - code */
#panel-tab-content .rejt-object-node {
  & * {
    font-family: 'Audiowide Mono', monospace;
    font-size: calc(var(--cb-font-size-small) - 2px);
  }
  .rejt-value {
    border-radius: 0;
  }

  .rejt-value-node:hover .rejt-value {
    border-color: transparent;

    :is(body.yellow) & {
      background-color: var(--cb-turquoise-transparent);
    }
  }
}

#storybook-panel-root .rejt-tree .rejt-object-node {
  :is(.rejt-collapsed, .rejt-not-collapsed) svg {
    padding-top: 2px;
    width: 19px;
    height: 19px;
  }

  & input {
    border-radius: 0;
    &[placeholder='Value'] {
      margin-right: 5px;
    }
  }
}
.rejt-not-collapsed-delimiter {
  transform: translateY(0.5px);
  display: inline-block;
}
/* controls tab - code inputs, buttons, textarea */
#storybook-panel-root .rejt-add-value-node button {
  margin-top: -1px;

  &[type='submit'] {
    color: var(--cb-black);
  }
  :is(body.yellow) &[type='submit']:focus-visible {
    color: var(--cb-black);
    outline: 2px solid var(--cb-red);
  }
}
.docblock-argstable :is(textarea, textarea:focus) {
  box-shadow: none;
}