.bk.bk-menu-overlay {
  @apply fixed top-0 left-0 w-screen bottom-0 z-menu-overlay;
}

.bk.bk-menu-list {
  @apply fixed top-0 left-0 bg-white shadow-lg max-w-[480px] lg:min-w-[400px] bottom-0 flex flex-col;
  @apply z-menu;
  width: calc(100vw - 40px);

  #bk-menu-secondary {
    @apply mt-auto;
  }

  > button {
    @apply h-40 md:h-50 flex items-center text-base font-bold pl-15 md:pl-25;
    @apply bg-white text-mono-950;
    svg {
      @apply w-20 h-20  md:w-30 md:h-30 mr-25 fill-current;
    }
  }
}

.bk-menu-list-inner {
  @apply flex-1 overflow-auto flex flex-col;
  > div {
    @apply grid;
    @apply border-t border-t-mono-200;
  }
}

.bk .bk-menu-list-button {
  @apply grid items-center pl-15 pr-20 py-15 gap-x-10 md:gap-x-15 w-full text-left whitespace-nowrap text-mono-950;
  @apply lg:hover:bg-mono-100;
  @apply border-b border-b-mono-200;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  &[disabled] {
    @apply pointer-events-none;
    .bk-menu-list-icon {
      @apply bg-white border-mono-100 text-mono-300;
    }
    span,
    strong {
      @apply text-mono-400;
    }
  }
  strong {
    @apply font-semibold;
  }
  span {
    grid-column: 2;
    @apply text-mono-700 text-sm;
  }

  &:not([disabled]).bk-is-danger {
    .bk-menu-list-icon {
      @apply bg-red-light text-red-normal border-red-normal/40;
    }
    &:hover {
      .bk-menu-list-icon {
        @apply bg-red-normal/20 text-red-dark border-red-normal/50;
      }
    }
  }

  &:not([disabled]).bk-is-success {
    .bk-menu-list-icon {
      @apply bg-lime-light text-lime-normal border-lime-normal/40;
    }
    &:hover {
      .bk-menu-list-icon {
        @apply bg-lime-normal/20 text-lime-dark  border-lime-normal/40;
      }
    }
  }

  &:hover {
    .bk-menu-list-icon {
      @apply bg-mono-200 text-mono-900 border-mono-500;
    }
  }
}
.bk-menu-list-icon {
  @apply flex items-center justify-center bg-mono-100 rounded text-mono-500 border border-mono-300;
  @apply w-40 h-40 md:w-50 md:h-50;
  grid-column: 1;
  grid-row: 1 / -1;
  svg {
    @apply w-25 h-25 fill-current pointer-events-none;
  }
}

.bk-menu-meta {
  @apply px-15 py-10 text-xs bg-mono-100 text-mono-600 items-center leading-none flex justify-between;

  a {
    @apply hover:text-accent-700 hover:underline;
  }
}
.bk-menu-meta-logo {
  @apply flex gap-5 items-center;
  .bk-icon {
    @apply bg-accent-700 size-20 flex items-center justify-center rounded;
  }
  svg {
    @apply text-white;
  }
}
