.bk-html-root {
  --bk-sidebar-width-right: 100vw;

  @screen md {
    --bk-sidebar-width-right: 351px;
  }
}

.bk-sidebar {
  @apply fixed bg-white z-sidebar w-sidebar-right;
  &.bk-is-right {
    @apply transition-all;
    box-shadow:
      1px -0px 2px rgb(20 45 82 / 2%),
      3px -0px 4px rgb(20 45 82 / 3%),
      5px -0px 8px rgb(20 45 82 / 4%);
    @screen lg {
      right: var(--bk-root-offset-right);
      box-shadow:
        -1px -0px 2px rgb(20 45 82 / 2%),
        -3px -0px 4px rgb(20 45 82 / 3%),
        -5px -0px 8px rgb(20 45 82 / 4%);
    }
  }
  &.bk-is-left {
    @apply md:w-[400px];
    left: var(--bk-root-offset-left-add-list);
    box-shadow:
      1px -0px 2px rgb(20 45 82 / 2%),
      3px -0px 4px rgb(20 45 82 / 3%),
      5px -0px 8px rgb(20 45 82 / 4%);
  }
  top: var(--bk-root-offset-top);
  bottom: 0;

  @screen md {
    bottom: var(--bk-root-offset-bottom);
  }

  &:empty {
    @apply hidden;
  }

  &.bk-is-hidden {
    @apply opacity-0 pointer-events-none translate-y-40;
  }
  .bk-sidebar-inner {
    @apply h-full flex flex-col;
  }

  .bk-sidebar-title {
    @apply !font-semibold !font-sans !pl-15 md:!pl-20 !border-b !border-b-mono-300 flex items-center h-50;
    @apply select-none;

    .bk-beta-indicator {
      @apply mr-auto ml-5;
    }

    button {
      &:first-of-type {
        @apply ml-auto;
      }
      @apply h-full px-15 text-mono-700 hover:bg-mono-100 hover:text-mono-900 min-w-[50px] flex items-center justify-center;
      svg {
        @apply w-[1em] h-[1em] fill-current;
      }
    }
  }
}

.bk-sidebar-content-wrapper {
  @apply flex-1 relative overflow-hidden;
}
.bk-sidebar-content {
  @apply absolute top-0 left-0 w-full h-full overflow-auto;
  &::-webkit-scrollbar {
    display: none;
  }
}

.bk-sidebar-padding {
  @apply p-15 lg:p-20;
}

.bk-sidebar-detached {
  @apply fixed top-0 left-0 bg-white z-sidebar-detached rounded-md flex flex-col overflow-hidden will-change-transform;
  @apply border border-mono-200;
  contain: layout paint style;
  &.bk-is-focused {
    @apply shadow-xl border-mono-700;
    .bk-sidebar-title {
      @apply bg-mono-800 text-white;

      button:hover {
        @apply bg-mono-700;
      }
    }
  }
  &:not(.bk-is-focused) {
    .bk-sidebar-detached-inner {
      button,
      li,
      a,
      input,
      textarea {
        @apply pointer-events-none;
      }
    }
  }

  .bk-sidebar-title {
    @apply cursor-move;
    @apply flex bg-mono-300 select-none pl-10 font-semibold text-sm h-40 items-center text-mono-500;

    > .bk-icon {
      @apply w-20 h-20 mr-5;
      svg {
        @apply fill-current;
      }
    }

    > span {
      @apply mr-auto;
    }

    button {
      @apply w-40 h-40 flex items-center justify-center;
      &:hover {
        @apply bg-mono-400;
      }
      svg {
        @apply w-20 h-20 fill-current;
      }
    }
  }
}

.bk-sidebar-detached-inner {
  @apply h-full flex flex-col relative;
}

.bk-sidebar-detached-handle {
  @apply absolute z-50;

  &.bk-is-bottom {
    @apply bottom-0 h-10 w-full cursor-ns-resize;
  }
  &.bk-is-right {
    @apply right-0 h-full w-10 cursor-ew-resize;
  }
  &.bk-is-bottom-right {
    @apply right-0 bottom-0 h-10 w-10 cursor-se-resize;
  }
}

html.bk-is-sidebar-interacting {
  .bk-sidebar-detached,
  iframe,
  button,
  input,
  textarea,
  a {
    /* @apply !pointer-events-none; */
  }
}

.bk-sidebar-tabs {
  @apply relative bg-mono-900 z-sidebar-tabs left-0 w-full flex justify-between flex-row-reverse overflow-auto lg:overflow-visible h-40 lg:h-auto;
  contain: style size;

  > div {
    @apply flex;
  }

  @screen lg {
    @apply fixed top-0;
    top: 0;
    bottom: var(--bk-root-offset-bottom);
    @apply w-50 left-auto right-0 block;

    > div {
      @apply min-h-[50px] relative block;

      &:first-child {
        &:before {
          content: '';
          @apply absolute bottom-0 left-0 w-full h-1 bg-mono-700;
        }

        .bk-tooltip {
          @apply top-full translate-y-0 mr-10 right-full mt-10;
        }
      }
    }
  }

  &.bk-has-sidebar-open {
    .bk-sidebar-container-tabs {
      button:not(.is-active):not(:hover) {
        @apply text-mono-600;
      }
    }
  }

  button {
    @apply w-50 h-40 relative;
    @apply md:h-50;

    .bk-tooltip {
      @apply absolute right-full left-auto mr-10 top-1/2 -translate-y-1/2;
    }
  }
}
.bk-sidebar-container-tabs {
  &.bk-is-right {
    @apply flex flex-row;
    @apply lg:flex-col;
  }
  .bk-toolbar-button {
    &:before {
      @apply content-[''] w-0 h-0 border-solid;
      @apply absolute bottom-0 left-[17.5px] transition origin-bottom;
      @apply scale-y-0;
      border-width: 0 8px 6px;
      border-color: transparent transparent #ffffff transparent;
    }

    @screen lg {
      &.bk-is-right {
        &:before {
          border-width: 10px 0 10px 10px;
          border-color: transparent transparent transparent #ffffff;
          @apply absolute top-15 left-0 transition origin-left;
          @apply scale-x-0;
        }
      }
      &.bk-is-left {
        &:before {
          border-width: 0 10px 10px;
          @apply left-15;
        }
      }
    }

    &.is-active {
      &:before {
        @apply scale-100;
      }
    }
  }
}

.bk-sidebar-badge {
  @apply absolute top-3 right-3 w-15 h-15 rounded-full  text-xs flex items-center justify-center;

  &.bk-is-yellow {
    @apply bg-yellow-normal text-yellow-dark;
  }

  &.bk-is-red {
    @apply bg-red-normal text-white;
  }
}
