@use "../abstracts/cds-vars" as vars;

/// AGNOSTIC CONTAINERS
/// 
.cds-gap-25 {
  gap: vars.$cds-spacing-25;
}
.cds-gap-50 {
  gap: vars.$cds-spacing-50;
}
.cds-gap-100 {
  gap: vars.$cds-spacing-100;
}

.cds-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;

  &--va-c {
    align-items: center;
  }
}

.cds-col {
  display: flex;
  flex-direction: column;
  width: fit-content;
}

[class^="cds-col-"] {
  @extend .cds-col;
}

.cds-col-1 { $size: 8.33%; min-width: $size; width: $size; max-width: $size;}
.cds-col-2 { $size: 16.66%; min-width: $size; width: $size; max-width: $size;}
.cds-col-3 { $size: 25%; min-width: $size; width: $size; max-width: $size;}
.cds-col-4 { $size: 33.33%; min-width: $size; width: $size; max-width: $size;}
.cds-col-5 { $size: 41.66%; min-width: $size; width: $size; max-width: $size;}
.cds-col-6 { $size: 50%; min-width: $size; width: $size; max-width: $size;}
.cds-col-7 { $size: 58.33%; min-width: $size; width: $size; max-width: $size;}
.cds-col-8 { $size: 66.66%; min-width: $size; width: $size; max-width: $size;}
.cds-col-9 { $size: 75%; min-width: $size; width: $size; max-width: $size;}
.cds-col-10 { $size: 83.33%; min-width: $size; width: $size; max-width: $size;}
.cds-col-11 { $size: 91.66%; min-width: $size; width: $size; max-width: $size;}
.cds-col-12 { $size: 100%; min-width: $size; width: $size; max-width: $size;}

////////////////////////////////////////////////

.cds-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
}

.cds-container--h {
  @extend .cds-container;
  flex-direction: row;
}

.cds-container--h25 {
  @extend .cds-container--h;
  gap: vars.$cds-spacing-25;
}

.cds-container--h50 {
  @extend .cds-container--h;
  gap: vars.$cds-spacing-50;
}

.cds-container--h100 {
  @extend .cds-container--h;
  gap: vars.$cds-spacing-100;
}

.cds-container--v {
  @extend .cds-container;
  flex-direction: column;
}

.cds-container--v25 {
  @extend .cds-container--v;
  gap: vars.$cds-spacing-25;
}

.cds-container--v50 {
  @extend .cds-container--v;
  gap: vars.$cds-spacing-50;
}

.cds-container--v100 {
  @extend .cds-container--v;
  gap: vars.$cds-spacing-100;
}


///DO NOT USE!!!! FOR TESTING PURPOSE ONLY

.cds-item {
  width: 100%;
  height: 100px;
  flex: 1 1 200px;
}

.cds-container-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: vars.$cds-spacing-25;
  padding: vars.$cds-spacing-25 0;

  & .cds-item {
    background-color: red;
  }
}

.cds-container-row-nowrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: vars.$cds-spacing-25;
  padding: vars.$cds-spacing-25 0;

  & .cds-item {
    background-color: red;
  }
}

.cds-container-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: vars.$cds-spacing-25;
  padding: vars.$cds-spacing-25 0;
  align-items: flex-start;

  & .cds-item {
    background-color: royalblue;
  }
}


//////////////////////////////////
.cds-toolbar-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: vars.$cds-spacing-25;
  padding: 0;
}

.cds-table-actions-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: vars.$cds-spacing-25;
}

.cds-form-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: vars.$cds-spacing-100;
}

.cds-form-inline-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: vars.$cds-spacing-100;
  padding: vars.$cds-spacing-100 0;
}

.temp-cds-chip-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: vars.$cds-spacing-25;
  padding: vars.$cds-spacing-25 0;
}

.cds-card-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: vars.$cds-spacing-100;
  padding: vars.$cds-spacing-100 0;
}