#root div[role='main'] > div {
  /* remove border */
  box-shadow: none;

  --top-bar-height: 43px;
  & > div > div:first-child > div:first-child {
    /* top-bar height */
    &,
    & > div {
      height: var(--top-bar-height);
      box-shadow: none;
    }
    & + div {
      height: calc(100% - var(--top-bar-height));
      top: var(--top-bar-height);
    }

    /* top-bar border (dark theme) */
    :is(body.dark) &::after,
    :is(body.dark) & > div > div:first-child:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background-color: var(--cb-yellow-alt);
    }
    :is(body.dark) & > div > div:first-child {
      position: relative;

      &::after {
        right: -7px;
      }
    }
    :is(body.dark) &::after {
      right: var(--corner--width);
    }

    /* font */
    > div button :is(span, div svg) {
      font-size: var(--cb-font-size);
    }
    > div button div:has(> svg + span) span {
      margin-top: 0;
    }

    /* icons */
    > div button svg {
      width: 16px;
      height: 16px;
    }
    > div :is(button:hover, a:hover) {
      color: var(--cb-turquoise);
    }
    > div :is(button, a) {
      margin-top: 7px;
      border-radius: 1px;
    }
    > div :is(button:focus-visible, a:focus-visible) {
      outline: none;
      border: 1px solid var(--cb-turquoise);
      color: var(--cb-turquoise);
    }

    /* right side controls & angled border */
    & > div > div:last-child {
      margin-right: 0;
      padding-right: 3px;
      padding-left: 90px;
      margin-left: 0;
      clip-path: polygon(
        100% 100%,
        100% 0,
        90px 0,
        65px 22px,
        31px 22px,
        3px 100%
      );

      :is(body.yellow) &:not(:has(a[title='Open canvas in new tab'])) {
        background-color: var(--cb-yellow-main);
        color: var(--cb-black);
      }

      :is(body.topRightYellow) &:has(a[title='Open canvas in new tab']) {
        background-color: var(--cb-yellow-main);
        color: var(--cb-black);
      }

      :is(body.topRightDark) &:has(a[title='Open canvas in new tab']) {
        background-color: var(--cb-darkest-gray);
        color: var(--cb-white);
      }

      :is(body.dark) &:not(:has(a[title='Open canvas in new tab'])) {
        background-color: var(--cb-yellow-alt);
        color: var(--cb-black);
      }

      :is(body.dark.topRightDarkRed, body.dark.topRightDark)
        &:has(a[title='Open canvas in new tab']) {
        background-color: var(--cb-yellow-alt);
        color: var(--cb-black);
      }

      /* TODO: handle white on black top corner */
    }
  }
}

/* left side angled border */
#root div[role='main'] {
  & > div > div > div:first-child > div:first-child {
    position: relative;
  }
  &:before,
  :is(body.dark) &:after {
    content: '';
    position: absolute;
    top: 42px;
    height: 32px;
    background-color: black;
    width: 98px;
    clip-path: polygon(24px 100%, 40px 18px, 77px 18px, 100% 0, 0 0, 0 100%);
    z-index: 9;
  }
  :is(body.dark) &:before {
    transform: translate(-1px, -1px);
    background-color: var(--cb-darkest-gray);
    z-index: 10;
  }
  :is(body.dark) &:after {
    background-color: var(--cb-yellow-alt);
  }
  :is(body.darkRed) &:before {
    transform: translate(-1px, -1px);
    background-color: var(--cb-midnight-navy);
    z-index: 10;
  }
}

/* Skip to sidebar */
#storybook-preview-wrapper > a:focus {
  box-shadow: none;
  border-radius: 0;
  font-size: var(--cb-font-size);
  padding-left: 28px;
  padding-right: 28px;
  color: var(--cb-black);

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