@use 'mixins/amixin' as *;
.cards {
  .group {
    border-radius: 6px;
    padding: 6px;
    &:hover {
      background-color: var(--mat-sys-surface-container);
      transition: all 0.2s ease;
    }
  }
  .item {
    position: relative;
    .title {
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      text-align: center;
    }
    &:hover {
      .add {
        display: block;
      }
    }
    .add {
      @apply absolute -top-[12px] -right-[10px] z-10 hidden rounded-full;
      background-color: var(--mat-sys-inverse-primary);
      ::ng-deep {
        .mdc-icon-button {
          --mat-icon-button-state-layer-size: 26px;
          --mat-icon-button-icon-size: 20px;
          line-height: 26px;
          padding: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          .mat-icon {
            height: 20px;
            width: 20px;
            color: var(--mat-sys-primary);
          }
        }
      }
    }
    .inner {
      margin: 2px;
      padding: 16px 6px;
      border-radius: 4px;
      position: relative;
      background-color: var(--mat-sys-background);
      transition: background 0.1s ease-in-out;
      box-shadow: var(--mat-sys-level0);
      &:hover,
      &.active {
        background-color: var(--mat-sys-secondary-fixed);
        color: var(--mat-sys-primary);
      }
      &.move {
        &:hover {
          cursor: move;
        }
      }
      &.show {
        &:hover {
          cursor: pointer;
        }
      }
    }
  }
}
