//////////////////////////////////////////////////////////////////////////////////////////
//   _  _ ____ _  _ ___  ____                                                           //
//   |_/  |__| |\ | |  \ |  |    This file belongs to Kando, the cross-platform         //
//   | \_ |  | | \| |__/ |__|    pie menu. Read more on github.com/kando-menu/kando     //
//                                                                                      //
//////////////////////////////////////////////////////////////////////////////////////////

// SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
// SPDX-License-Identifier: MIT

@use 'sass:color';

@use '../../variables.scss' as *;

.actionListContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.actionList {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  margin-bottom: 16px;

  &:has(.dragging) .actionItem * {
    pointer-events: none !important;
  }
}

.actionItem {
  position: relative;
  background-color: light-dark($base-light, color.adjust($base-dark, $lightness: 5%));
  border-radius: 8px;

  box-shadow: 0 2px 4px light-dark(rgba(0, 0, 0, 0.075), rgba(0, 0, 0, 0.2));
  border: 1.5px solid
    light-dark(
      color.adjust($base-light, $lightness: -10%),
      color.adjust($base-dark, $lightness: -10%)
    );

  // A low opacity seems to be required. Setting it to zero hides also the dragged copy
  // at the pointer.
  &.dragging {
    opacity: 0.001;
  }

  &.firstWorkflowType {
    border-top-left-radius: 0;
  }

  &.lastWorkflowType {
    border-top-right-radius: 0;
  }

  // Add small triangle at the bottom pointing downwards.
  &::after {
    content: '';
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 12px;
    border-style: solid;
    border-color: light-dark(
        color.adjust($base-light, $lightness: -10%),
        color.adjust($base-dark, $lightness: 5%)
      )
      transparent transparent transparent;
  }
}

.actionItemHeader {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: bold;
  padding: 6px 6px 6px 8px;
}

.workflowItemHeader {
  display: flex;
  font-weight: bold;
  padding: 12px 6px 4px 6px;
}

.actionItemContent {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 10px 10px 10px;
}

.addActionContainer {
  padding: 0 30px;
}
