@use 'variables' as *;

.cpt-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0 $spacing-sm;

  > * {
    width: 12ch;

    &.span-2 {
      width: calc((2 * 12ch) + 20px);
    }

    &.span-3 {
      width: calc((3 * 12ch) + (2 * $spacing-sm));
    }

    &.span-4 {
      width: calc((4 * 12ch) + (3 * $spacing-sm));
    }

    &.span-5 {
      width: calc((5 * 12ch) + (4 * $spacing-sm));
    }

    &.span-6 {
      width: calc((6 * 12ch) + (5 * $spacing-sm));
    }
  }

  &.gap-sm {
    gap: $spacing-xs;

    > * {
      width: 12ch;
  
      &.span-2 {
        width: calc((2 * 12ch) + $spacing-xs);
      }
  
      &.span-3 {
        width: calc((3 * 12ch) + (2 * $spacing-xs));
      }
  
      &.span-4 {
        width: calc((4 * 12ch) + (3 * $spacing-xs));
      }
  
      &.span-5 {
        width: calc((5 * 12ch) + (4 * $spacing-xs));
      }
  
      &.span-6 {
        width: calc((6 * 12ch) + (5 * $spacing-xs));
      }
    }
  }

  &.cpt-buttons {
    > * {
      width: revert;
    }
  }
}