/* AGPLv3 License
Notion-Styled Kanban
Author: AnubisNekhet
Note: If you decide to implement it in your theme or redistribute it, please keep this comment (Especially for *certain* individuals who may try to rebrand it as their own :))
Support me: https://buymeacoffee.com/AnubisNekhet
*/
body.theme-light {
  --notion-kanban-card: var(--background-primary);
  --notion-kanban-card-hover: var(--background-primary-alt);
  --notion-kanban-darken: var(--background-primary);
  --notion-kanban-darken-hover: var(--background-primary-alt);
}
body.theme-dark {
  --notion-kanban-card: var(--color-base-30);
  --notion-kanban-card-hover: var(--color-base-35);
  --notion-kanban-darken: rgba(var(--ctp-crust, 0, 0, 0), 0.3);
  --notion-kanban-darken-hover: rgba(var(--ctp-crust, 0, 0, 0), 0.2);
}
body {
  --kanban-transition: 100ms ease-out 0s;
  .kanban-plugin__lane {
    background-color: transparent;
    border: none;
    border-radius: 0;
    .kanban-plugin__lane-header-wrapper {
      .kanban-plugin__lane-grip {
        color: var(--text-muted);
        &:hover {
          color: var(--text-normal);
          background-color: var(--background-modifier-hover);
          border-radius: var(--radius-s);
        }
      }
      .kanban-plugin__lane-title {
        flex-grow: 0;
        width: auto;
        .kanban-plugin__lane-title-text {
          flex-grow: 0;
        }
      }
      .kanban-plugin__lane-settings-button-wrapper {
        opacity: 0;
        transition: opacity var(--kanban-transition);
        .kanban-plugin__lane-settings-button {
          .kanban-plugin__icon {
            rotate: 90deg;
          }
        }
      }
      border-bottom: none;
    }
    &:has(.kanban-plugin__placeholder:only-child):not(:has(.kanban-plugin__item)) .kanban-plugin__item-button-wrapper {
      padding: 0;
      .kanban-plugin__new-item-button {
        padding: 0 10px;
      }
    }
    .kanban-plugin__lane-items {
      &.kanban-plugin__scroll-container.kanban-plugin__vertical {
        background-color: transparent;
      }
      .kanban-plugin__placeholder {
        border: none;
        height: 5px;
        margin-bottom: 0;
        margin-top: 0;
      }
      .kanban-plugin__item-wrapper {
        .kanban-plugin__item {
          &.is-complete {
            .kanban-plugin__item-markdown {
              text-decoration: line-through;
              color: var(--text-faint);
            }
          }
          border: none;
          box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px;
          transition: background var(--kanban-transition) !important;
          .kanban-plugin__item-content-wrapper {
            background: var(--notion-kanban-card);
            transition: background var(--kanban-transition) !important;
            .kanban-plugin__item-title-wrapper {
              background: var(--notion-kanban-darken);
              transition: background var(--kanban-transition) !important;
              .kanban-plugin__item-prefix-button-wrapper {
                margin-right: 6px;
                box-shadow: rgb(15 15 15 / 10%) 0px 0px 0px 1px, rgb(15 15 15 / 10%) 0px 2px 4px;
                border-radius: 3px;
                background: var(--notion-kanban-card);
                transition: background var(--kanban-transition) !important;
                &:hover {
                  transition: background var(--kanban-transition) !important;
                  background: var(--notion-kanban-card-hover);
                  .kanban-plugin__item-prefix-button {
                    background-color: transparent;
                  }
                }
                .kanban-plugin__item-prefix-button {
                  left: 0;
                  background-color: var(--background-primary);
                  padding: var(--size-2-3);
                }
              }
            }
            .kanban-plugin__item-postfix-button-wrapper {
              box-shadow: rgb(15 15 15 / 10%) 0px 0px 0px 1px, rgb(15 15 15 / 10%) 0px 2px 4px;
              border-radius: 3px;
              background-color: var(--notion-kanban-card);
              opacity: 0;
              transition: opacity var(--kanban-transition), background-color var(--kanban-transition);
              &:hover {
                background-color: var(--notion-kanban-card-hover);
                transition: background-color var(--kanban-transition);
                .kanban-plugin__item-postfix-button {
                  background-color: transparent;
                }
              }
              .kanban-plugin__item-postfix-button {
                right: 0;
                padding: var(--size-2-3);
                background-color: var(--background-primary);
                .kanban-plugin__icon {
                  rotate: 90deg;
                }
              }
            }
          }
          &:hover {
            transition: background var(--kanban-transition) !important;
            .kanban-plugin__item-content-wrapper {
              transition: background var(--kanban-transition) !important;
              background-color: var(--notion-kanban-card-hover);
              .kanban-plugin__item-title-wrapper {
                transition: background var(--kanban-transition) !important;
                background-color: var(--notion-kanban-darken-hover);
              }
              .kanban-plugin__item-postfix-button-wrapper {
                opacity: 1;
                transition: opacity var(--kanban-transition), background-color var(--kanban-transition);
              }
            }
          }
        }
      }
    }
    .kanban-plugin__item-button-wrapper {
      border-top: none;
      padding: 0;
      .kanban-plugin__new-item-button {
        justify-content: flex-start;
        color: transparent;
        box-shadow: none;
        border: none;
        background: transparent;
        &:hover {
          background: var(--background-modifier-hover);
          .kanban-plugin__item-button-plus {
            color: var(--text-normal);
          }
        }
        .kanban-plugin__item-button-plus {
          color: var(--text-muted);
          &::after {
            content: " New";
          }
        }
      }
    }
    .kanban-plugin__item-form {
      border-top: none;
    }
    &:hover {
      .kanban-plugin__lane-header-wrapper {
        .kanban-plugin__lane-grip {
          opacity: 1;
          transition: opacity var(--kanban-transition);
        }
        .kanban-plugin__lane-settings-button-wrapper {
          opacity: 1;
          transition: opacity var(--kanban-transition);
        }
      }
    }
  }
  .kanban-plugin__drag-container {
    .kanban-plugin__item-wrapper {
      .kanban-plugin__item {
        border: none;
        box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px;
      }
    }
  }
  .kanban-plugin__item-input {
    background-color: transparent;
  }
}
