/**
 * 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;
}

:host {
  z-index: var(--calcite-z-index);
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  background-color: transparent;
}

.content {
  margin: 0px;
  display: flex;
  block-size: 100%;
  inline-size: 100%;
  overflow: hidden;
  flex: 1 0 0;
}

.action-bar-container {
  display: flex;
}

:host([detached]) {
  margin-inline: 0.5rem;
  margin-block: 0.5rem 1.5rem;
}

@keyframes in-up {
  0% {
    opacity: 0;
    transform: translate3D(0, 5px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3D(0, 0, 0);
  }
}

:host([detached]) {
  animation: in-up var(--calcite-internal-animation-timing-slow) ease-in-out;
  border-radius: 0.25rem;
  border-width: 0px;
  --tw-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --tw-shadow-colored: 0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

:host([position=end]) {
  align-self: flex-end;
}

:host([position=start]) {
  align-self: flex-start;
}

:host([height-scale=s]) {
  block-size: 33.333333%;
}

:host([height-scale=m]) {
  block-size: 70%;
}

:host([height-scale=l]) {
  block-size: 100%;
}

:host([height-scale=l][detached]) {
  block-size: calc(100% - 2rem);
}

::slotted(calcite-panel) {
  block-size: 100%;
  inline-size: 100%;
}

::slotted(calcite-action-bar),
::slotted(calcite-action-bar[position=end]) {
  border-inline-end: 1px solid;
  border-color: var(--calcite-color-border-3);
}

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

[hidden] {
  display: none;
}