/**
 * Do not edit directly
 * Generated on Fri, 02 Aug 2024 20:03:08 GMT
 */
/**
 * Do not edit directly
 * Generated on Fri, 02 Aug 2024 20:03:08 GMT
 */
/**
 * Do not edit directly
 * Generated on Fri, 02 Aug 2024 20:03:08 GMT
 */
/**
 * Do not edit directly
 * Generated on Fri, 02 Aug 2024 20:03:08 GMT
 */
/**
 * Do not edit directly
 * Generated on Fri, 02 Aug 2024 20:03:06 GMT
 */
/* mixins & extensions */
/* helper to properly scale internal durations */
/**
* Currently only used in Checkbox.
*/
:host {
  /* Base ":host" styles for the component */
  box-sizing: border-box;
  background-color: var(--calcite-color-foreground-1);
  color: var(--calcite-color-text-2);
  font-size: var(--calcite-font-size--1);
}
:host * {
  box-sizing: border-box;
}

/**
* CSS Custom Properties
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-action-group-columns: Sets number of grid-template-columns when the `layout` property is `"grid"`.
* @prop --calcite-action-group-gap: Sets the gap (gutters) between rows and columns when the `layout` property is `"grid"`.
* @prop --calcite-action-group-padding: Sets the padding when the `layout` property is `"grid"`.
*/
:host {
  display: flex;
  flex-direction: column;
  padding: 0px;
  --calcite-action-group-columns: 3;
  --calcite-action-group-gap: 1px;
  --calcite-action-group-padding: 1px;
}

.container {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}

:host([columns="1"]) {
  --calcite-action-group-columns: 1;
}

:host([columns="2"]) {
  --calcite-action-group-columns: 2;
}

:host([columns="3"]) {
  --calcite-action-group-columns: 3;
}

:host([columns="4"]) {
  --calcite-action-group-columns: 4;
}

:host([columns="5"]) {
  --calcite-action-group-columns: 5;
}

:host([columns="6"]) {
  --calcite-action-group-columns: 6;
}

:host(:first-child) {
  padding-block-start: 0px;
}

:host([layout=horizontal]),
:host([layout=horizontal]) .container {
  flex-direction: row;
}

:host([layout=grid]) {
  display: grid;
}

:host([layout=grid]) .container {
  display: grid;
  place-content: stretch;
  background-color: var(--calcite-color-background);
  gap: var(--calcite-action-group-gap);
  padding: var(--calcite-action-group-gap);
  grid-template-columns: repeat(var(--calcite-action-group-columns), auto);
}

:host([hidden]) {
  display: none;
}

[hidden] {
  display: none;
}