.mykn-kanban {
  --mykn-kanban-spacing: 4px;

  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  > .mykn-toolbar {
    z-index: 100;
  }

  &__body {
    height: 100%;
  }

  &__body .mykn-grid {
    height: 100%;
  }

  &__body .mykn-column {
    box-sizing: border-box;
    overflow-y: auto;
  }

  &__body &__drop-indicator {
    background-color: var(--kanban-drop-indicator-background);
    border: 1px dashed var(--kanban-drop-indicator-border);
    box-sizing: content-box;
    height: calc(var(--typography-line-height-body-s) * 2);
    padding-block: var(--sizes-spacing-xs-v);
    z-index: 10;
  }

  &__body .mykn-column > .mykn-body > .mykn-h3 {
    position: sticky;
    top: 0;
    z-index: 10;
  }

  &__track {
    display: flex;
    flex-direction: column;
    gap: var(--mykn-kanban-spacing);
    height: 100%;
    padding: var(--mykn-kanban-spacing) !important;
    position: relative;
  }

  &__track:before {
    background-color: var(--kanban-background);
    content: "";
    height: 100%;
    inset-block-start: 0;
    inset-inline-start: calc(-2 * var(--sizes-spacing-xs-h));
    position: absolute;
    width: calc(100% + 2 * var(--sizes-spacing-xs-h));
  }

  &__body &__button {
    white-space: normal;

    &:focus-within {
      z-index: 100;
    }
  }

  &__select {
    inset-block-end: var(--sizes-spacing-xs-v);
    inset-inline-end: var(--sizes-spacing-xs-h);
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 50%;

    &:focus-within {
      opacity: 1;
      pointer-events: auto;
    }

    &:focus-visible {
      visibility: visible;
    }
  }
}