.bk {
  #bk-blokkli-item-actions-title {
    height: var(--bk-actions-height);
    @apply w-[160px] lg:w-200 lg:w-[240px];
  }
  .bk-blokkli-item-actions-title-count {
    @apply bg-mono-50 text-mono-900 inline-flex items-center justify-center px-3 min-w-[1.5em] h-[1.5em] rounded-full ml-10 text-xs lg:text-sm font-bold leading-none;
    &.bk-is-hidden {
      @apply opacity-0;
    }
  }
  &.bk-blokkli-item-actions {
    @apply text-mono-50  select-none text-sm;
  }
  .bk-blokkli-item-actions-inner {
    @apply fixed left-0 p-0 z-actions w-full;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    /* contain: layout style paint; */
    bottom: var(--bk-root-offset-bottom);
    @screen lg {
      @apply top-0 w-auto;
      bottom: initial;
    }
  }
  .bk-blokkli-item-actions-controls {
    @apply flex items-stretch whitespace-nowrap h-full flex-wrap lg:flex-nowrap;
    @apply bg-mono-950/90 backdrop-blur lg:bg-mono-900;
    @apply relative z-50;

    &.bk-is-locked {
      @apply pointer-events-none;
      .bk-blokkli-item-actions-buttons > button,
      .bk-blokkli-item-options > .bk-blokkli-item-options-item {
        @apply opacity-20;
      }
    }

    html.bk-low-performance-mode & {
      @apply backdrop-filter-none;
    }

    &::-webkit-scrollbar {
      display: none;
    }
    @screen lg {
      @apply rounded-md filter-none border border-mono-200 backdrop-filter-none;
    }
  }

  .bk-blokkli-item-actions-buttons {
    @apply relative flex flex-1 lg:flex-initial;
    > button {
      @apply text-mono-300 h-full flex items-center shrink-0  justify-center relative lg:static z-50;
      @apply lg:hover:bg-mono-700 lg:hover:text-mono-50;
      max-width: var(--bk-actions-height);
      flex: 1 0 auto;
      @screen lg {
        width: var(--bk-actions-height);
        flex: initial;
      }
      &.bk-is-active {
        @apply bg-white text-mono-900 z-50;
      }
      .bk-tooltip {
        @apply absolute bottom-full left-0 min-w-full mb-3;
      }
      @screen lg {
        &:not(:hover) {
          .bk-tooltip {
            @apply hidden;
          }
        }
      }

      &[disabled] {
        @apply opacity-25 pointer-events-none;
      }
      svg {
        @apply w-20 h-20 lg:w-25 lg:h-25 fill-current;
      }
    }
  }
  .bk-blokkli-item-actions-buttons:last-child button.bk-is-last {
    @apply lg:rounded-e-md;
  }

  .bk-blokkli-item-actions-type-button {
    @apply flex items-center justify-between cursor-default lg:min-w-[180px] text-mono-300 font-bold h-full pl-[9px] lg:pr-15  rounded-l leading-none;
    @apply text-xs lg:text-sm lg:text-base;
    @apply w-full;
    .bk-blokkli-item-actions-title-label {
      @apply mr-auto truncate;
    }
    .bk-blokkli-item-actions-title-icon {
      @apply text-xl lg:text-[34px] mr-[0.25em] bg-mono-800 w-[1em] h-[1em] rounded border border-mono-600 relative text-white;
      flex: 0 0 auto;
      svg {
        @apply w-[0.7em] h-[0.7em] fill-current absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
      }
    }
    &.is-interactive {
      @apply cursor-pointer;
      @media not all and (hover: none) {
        &:not(.is-open) {
          @apply hover:text-mono-50 hover:bg-mono-700;
          &:hover {
            .bk-blokkli-item-actions-title-icon {
              @apply bg-mono-600 border-mono-400;
            }
          }
        }
      }
    }
    &.is-open {
      @apply lg:bg-mono-700 text-white;
      .bk-caret {
        @apply transform rotate-180;
      }
      .bk-blokkli-item-actions-title-icon {
        @apply bg-mono-600 border-mono-400;
      }
    }
    .bk-caret {
      @apply ml-10;
      svg {
        @apply pointer-events-none w-15 h-15 fill-current;
      }
    }

    &.bk-is-reusable {
      .bk-blokkli-item-actions-title-icon {
        @apply bg-lime-dark border-lime-normal text-white;
      }
    }

    &.bk-is-fragment {
      .bk-blokkli-item-actions-title-icon {
        @apply bg-accent-900 border-accent-500 text-accent-50;
      }
    }
  }

  #bk-blokkli-item-actions {
    @apply lg:border-l lg:border-l-mono-600 justify-end;
  }

  .bk-blokkli-item-actions-type {
    @apply relative h-full;
  }

  .bk-blokkli-item-actions-type-dropdown {
    @apply absolute bottom-full left-0 min-w-[300px] bg-mono-900 text-mono-200 overflow-hidden shadow-xl-inverted rounded-tr w-screen lg:w-auto;
    @screen lg {
      @apply top-full bottom-auto shadow-xl rounded-t-none rounded-b;
    }
    h3 {
      @apply p-10 pt-15 font-semibold uppercase text-xs tracking-wide text-mono-400;
    }
    button {
      @apply flex py-15 px-10 items-center gap-5 w-full font-semibold lg:text-lg text-mono-300;
      text-align: left;
      line-height: 1;
      @screen lg {
        &:hover {
          @apply text-white bg-mono-800;
          .bk-blokkli-item-icon {
            @apply border-mono-300;
          }
        }
      }
    }
    .bk-blokkli-item-icon {
      @apply text-2xl lg:text-[34px] bg-mono-700 rounded flex items-center justify-center border border-mono-500 p-[0.2em];
    }

    > div:not(:first-child) {
      @apply border-t border-t-mono-800;
    }
  }

  .bk-blokkli-item-actions-comment {
    /* @apply relative; */
  }
  .bk-blokkli-item-actions-comment-dropdown {
    @apply absolute left-0 w-full bg-white p-15 shadow-xl-inverted z-10;
    bottom: var(--bk-actions-height);
    @screen lg {
      @apply top-full bottom-auto shadow-xl rounded-b;
    }
    button {
      @apply mt-15;
    }
  }
}
