.bk {
  &.bk-history {
    .bk-history-load-more {
      @apply h-[70px] pt-10;
      button {
        &:before {
          @apply hidden;
        }
        &:after {
          content: '';
          @apply absolute h-40 w-0 border-l-[8px] top-0 left-2 z-50 border-mono-400;
          border-style: dotted;
        }
      }
      > button {
        @apply w-full;
      }

      &:hover {
        button:after {
          @apply border-accent-700;
        }
      }
    }
    .bk-history-empty-message {
      @apply p-20;
    }
    ul {
      @apply relative;
      @apply pt-15;
      li {
        @apply relative pl-20;
        &:after {
          content: '';
          @apply absolute w-0 left-[25.5px] top-0 h-full;
          @apply border-l border-mono-300 border-dashed;
          @apply translate-y-20;
          @apply pointer-events-none;
          z-index: 1;
        }
        &.bk-is-last {
          @apply sticky bg-white bottom-0 z-50 py-15;
          &.bk-has-shadow {
            box-shadow: 0 -2px 12px theme('colors.mono.300');
          }
        }
        &.bk-is-last:after {
          @apply top-0 h-1/2 translate-y-0;
        }
        &.bk-is-active ~ li:after,
        &.bk-is-active:after {
          @apply border-solid border-mono-400;
        }

        &.bk-is-not-active .bk-history-item-button {
          @apply text-mono-400;
          em {
            @apply text-mono-400;
          }
          &:before {
            @apply text-mono-300 scale-50;
          }
        }
        &.bk-is-disabled .bk-history-item-button {
          @apply text-red-normal/50 line-through pointer-events-none;
          em {
            @apply text-red-normal/50;
          }
          &:before {
            @apply text-mono-300 scale-50;
          }
        }
        &.bk-is-active {
          .bk-history-item-button {
            &:before {
              @apply bg-accent-800 scale-100;
            }
          }
        }

        &.bk-is-applied .bk-history-item-button {
          &:before {
            @apply border-accent-200 bg-accent-200;
          }
        }
        &:not(.bk-is-active) .bk-history-item-button {
          &:hover {
            @apply text-accent-800;
            &:before {
              @apply bg-accent-400;
            }
          }
        }
        &:hover {
          .bk-history-item-actions {
            @apply block;
          }
        }
      }
      .bk-history-item-button {
        @apply text-left w-full block relative py-10 text-sm cursor-pointer pl-[22px] text-black;

        > div {
          @apply pointer-events-none;
        }

        &[disabled] {
          @apply pointer-events-none;
        }

        &:before {
          content: '';
          @apply absolute -top-[8px] left-[-1px] w-15 h-15 bg-mono-200 rounded-full z-10;
          @apply transition-all translate-y-20;
          box-shadow: 0 0 0 3px white;
        }

        strong {
          @apply text-sm font-semibold;
        }
        em {
          @apply text-mono-500 text-xs not-italic;
        }
      }
    }

    .bk-history-item-actions {
      @apply absolute right-15 top-1/2 -translate-y-1/2 hidden;

      button {
        @apply rounded-full p-3;
        svg {
          @apply fill-mono-500 size-20;
        }

        &:hover {
          @apply bg-red-normal;
          svg {
            @apply fill-white;
          }
        }
      }
    }
  }
}
