.bk {
  .bk-toolbar {
    @apply relative top-0 left-0 right-0 z-toolbar lg:right-50 lg:border-r lg:border-r-mono-700 pt-100 lg:pt-0;
    @apply lg:bg-mono-900;
    @apply select-none;
    @apply h-[140px] text-base flex;
    @apply lg:fixed;
    contain: style size;
    @screen lg {
      @apply h-50;
    }

    .bk-toolbar-button {
      .bk-tooltip {
        @apply absolute top-full left-0 mt-10;
        min-width: calc(100% - 10px);
      }
    }
  }

  &.bk-top {
    @apply fixed -top-100 left-0 w-full lg:static z-toolbar lg:z-auto lg:top-0;
    @apply bg-mono-950/90 backdrop-blur-lg;
    @screen lg {
      backdrop-filter: none;
    }
  }

  .bk-tooltip {
    @apply bg-mono-800/80 p-5 text-mono-50 font-semibold text-sm rounded select-none pointer-events-none hidden items-center justify-between px-10 leading-none whitespace-nowrap h-[38px];
    @screen lg {
      @apply flex;
    }
    .bk-shortcut {
      @apply ml-5;
    }
  }

  .bk-toolbar-menu {
    @apply relative z-menu h-full;
  }

  .bk-toolbar-menu-button {
    @apply lg:bg-accent-700 w-50 lg:w-70 flex items-center justify-center text-mono-50 h-full focus:outline-none relative z-50 transition;
    @apply lg:hover:bg-accent-800;

    &.bk-is-active {
      @apply bg-white text-accent-700;
    }

    svg {
      @apply w-[24px] h-[24px] fill-current pointer-events-none;
    }
  }

  .bk-toolbar-area.bk-is-menu + .bk-toolbar-container .bk-tooltip {
    @apply left-3;
  }

  .bk-toolbar-container {
    &:not(:first-child) {
      @screen lg {
        @apply border-l border-l-mono-600;
      }
    }
    &:empty {
      @apply hidden;
    }
    @apply relative flex h-full;
    &#bk-toolbar-view-options {
      @apply hidden lg:flex;

      .bk-tooltip {
        @apply left-auto right-[9px];
      }
    }
    &#bk-toolbar-title {
      @apply flex-1 text-xs lg:text-sm xl:text-base;
      .bk-toolbar-button {
        @apply w-full justify-start relative;
        .bk-tooltip {
          @apply w-auto min-w-0;
        }
        &:not(:hover) {
          .bk-tooltip {
            @apply hidden;
          }
        }
        .bk-toolbar-title {
          @apply relative w-full h-full;
          > div {
            @apply min-w-0 overflow-ellipsis overflow-hidden absolute top-1/2 left-0 w-full whitespace-nowrap -translate-y-1/2 text-left;
          }
        }
      }
      strong {
        @apply text-mono-100;
      }
    }

    &#bk-toolbar-before-sidebar {
      .bk-tooltip {
        @apply left-auto right-[9px];
      }
    }
  }
  .bk-status-indicator {
    @apply w-[0.9em] h-[0.9em] inline-block bg-red-normal rounded-full shrink-0 mr-[0.3em] align-middle;
    &.bk-is-success {
      @apply bg-lime-normal;
    }
    &.bk-is-warning {
      @apply bg-yellow-normal;
    }
  }

  .bk-feature-canvas-button {
    @apply flex h-full items-center justify-center min-w-[50px];
  }
}

.bk-translations {
  @apply relative text-xs lg:text-sm xl:text-base;
  .bk-toolbar-button {
    @apply uppercase h-full font-semibold;

    &.bk-is-active {
      @apply !bg-white text-mono-900;
    }
  }
  .bk-translations-dropdown {
    @apply absolute top-full right-0 lg:right-auto lg:left-0 max-w-[300px] bg-white z-toolbar-dropdown shadow-lg;

    label {
      @apply relative px-15 py-10 block cursor-pointer lg:hover:bg-mono-100 whitespace-nowrap text-sm;
      &.bk-is-muted {
        @apply text-mono-400;
      }
      > div {
        @apply flex items-center gap-10 md:gap-20 justify-between;
        span {
          @apply font-semibold order-last;
        }
      }
    }

    input {
      @apply appearance-none opacity-0 absolute top-0 left-0 w-full h-full cursor-pointer;
    }
  }
}

.bk-shortcut {
  @apply text-xs flex gap-5 font-bold items-center h-[1.5em] bg-transparent;
  color: inherit;
  > kbd {
    @apply px-5 rounded flex items-center min-w-[2em] justify-center h-full leading-none pt-[0.15em] font-sans text-xs;
    @apply text-mono-950;
    @apply border border-mono-50;
    box-shadow: 0 2px 0 0 theme('colors.mono.400');
    background: linear-gradient(
      theme('colors.mono.300'),
      theme('colors.mono.100')
    );
  }
}

.bk {
  .bk-toolbar-button {
    @apply text-mono-200 flex gap-5 items-center px-10 min-w-[50px] justify-center h-40 lg:h-50;

    &:not(.is-active) {
      @apply lg:hover:bg-mono-700;
    }

    &.bk-is-inactive {
      @apply text-mono-600;
    }

    &[disabled] {
      @apply pointer-events-none text-mono-700;
    }
    svg {
      @apply w-18 h-18 lg:w-20 lg:h-20 fill-current;
    }
    &.is-active {
      .bk-tooltip {
        @apply hidden;
      }
    }
    &:not(:hover) {
      .bk-tooltip {
        @apply hidden;
      }
    }
  }
}
