/**
 * 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([disabled]) {
  cursor: default;
  -webkit-user-select: none;
          user-select: none;
  opacity: var(--calcite-opacity-disabled);
}

:host([disabled]) *,
:host([disabled]) ::slotted(*) {
  pointer-events: none;
}

/**
* CSS Custom Properties
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-tile-background-color: Specifies the background color of the component.
* @prop --calcite-tile-border-color: Specifies the border color of the component.
* @prop --calcite-tile-description-text-color: Specifies the description text color of the component.
* @prop --calcite-tile-heading-text-color: Specifies the heading text color of the component.
*/
:host {
  --calcite-tile-background-color: var(--calcite-color-foreground-1);
  --calcite-tile-border-color: var(--calcite-color-border-2);
  --calcite-tile-description-text-color: var(--calcite-color-text-3);
  --calcite-tile-heading-text-color: var(--calcite-color-text-2);
  --calcite-ui-icon-color: var(--calcite-color-text-3);
  box-sizing: border-box;
  display: inline-block;
}

.container {
  background-color: var(--calcite-tile-background-color);
  block-size: var(--calcite-container-size-content-fluid);
  box-sizing: border-box;
  inline-size: var(--calcite-container-size-content-fluid);
  outline: var(--calcite-border-width-sm, 1px) solid var(--calcite-tile-border-color);
  -webkit-user-select: none;
          user-select: none;
}
.container.interactive {
  cursor: pointer;
}
.container.interactive:hover, .container.interactive:focus, .container.interactive.selected {
  outline-color: var(--calcite-color-brand);
  position: relative;
}
.container.interactive:hover .selection-icon, .container.interactive:focus .selection-icon, .container.interactive.selected .selection-icon {
  --calcite-ui-icon-color: var(--calcite-color-brand);
}
.container.interactive.selected {
  z-index: var(--calcite-z-index);
}
.container.interactive:focus {
  box-shadow: inset 0 0 0 1px var(--calcite-color-brand);
  z-index: var(--calcite-z-index-sticky);
}

.content-container,
.row {
  align-items: flex-start;
  display: flex;
}

.content-container {
  flex-direction: column;
}

.text-content-container {
  inline-size: 100%;
  outline-color: transparent;
  padding: 0;
}

.text-content {
  display: flex;
  flex-direction: column;
}

.heading {
  color: var(--calcite-tile-heading-text-color);
  font-weight: var(--calcite-font-weight-medium);
  line-height: 1.20313rem;
  overflow-wrap: break-word;
}

/* [Deprecated] Use the content-top slot for rendering icon with alignment="center" instead */
.large-visual-deprecated {
  align-items: center;
  justify-content: center;
  min-block-size: 12rem;
  text-align: center;
}
.large-visual-deprecated calcite-icon {
  align-self: center;
  block-size: 64px;
  inline-size: 64px;
}
.large-visual-deprecated .text-content-container {
  justify-content: center;
}

.description {
  color: var(--calcite-tile-description-text-color);
  font-weight: var(--calcite-font-weight-regular);
  overflow-wrap: break-word;
}

:host([alignment=center]) .icon {
  align-self: center;
}
:host([alignment=center]) .text-content-container {
  justify-content: center;
}
:host([alignment=center]) .text-content {
  text-align: center;
}
:host([alignment=center]) slot[name=content-start]::slotted(*),
:host([alignment=center]) slot[name=content-end]::slotted(*),
:host([alignment=center]) slot[name=content-top]::slotted(*),
:host([alignment=center]) slot[name=content-bottom]::slotted(*) {
  align-self: center;
}

:host([scale=s]) {
  max-inline-size: 400px;
  min-inline-size: 100px;
}
:host([scale=s]) .container {
  padding: var(--calcite-spacing-sm);
}
:host([scale=s]) .content-container--has-content,
:host([scale=s]) .row {
  gap: var(--calcite-spacing-sm);
}
:host([scale=s]) .heading {
  font-size: var(--calcite-font-size--2);
  line-height: 1.03125rem;
}
:host([scale=s]) .description {
  font-size: var(--calcite-font-size--3);
  line-height: 0.85938rem;
}
:host([scale=s]) .content-container--has-only-content-top-and-bottom slot[name=content-top]::slotted(*) {
  margin-block-end: var(--calcite-spacing-sm);
}

:host([scale=m]) {
  max-inline-size: 460px;
  min-inline-size: 140px;
}
:host([scale=m]) .container {
  padding: var(--calcite-spacing-md);
}
:host([scale=m]) .content-container--has-content,
:host([scale=m]) .row {
  gap: var(--calcite-spacing-md);
}
:host([scale=m]) .heading {
  font-size: var(--calcite-font-size--1);
  line-height: 1.20313rem;
}
:host([scale=m]) .description {
  font-size: var(--calcite-font-size--2);
  line-height: 1.03125rem;
}
:host([scale=m]) .content-container--has-only-content-top-and-bottom slot[name=content-top]::slotted(*) {
  margin-block-end: var(--calcite-spacing-md);
}

:host([scale=l]) {
  max-inline-size: 520px;
  min-inline-size: 160px;
}
:host([scale=l]) .container {
  padding: var(--calcite-spacing-xl);
}
:host([scale=l]) .content-container--has-content,
:host([scale=l]) .row {
  gap: var(--calcite-spacing-xl);
}
:host([scale=l]) .heading {
  font-size: var(--calcite-font-size-0);
  line-height: 1.375rem;
}
:host([scale=l]) .description {
  font-size: var(--calcite-font-size--1);
  line-height: 1.20313rem;
}
:host([scale=l]) .content-container--has-only-content-top-and-bottom slot[name=content-top]::slotted(*) {
  margin-block-end: var(--calcite-spacing-xl);
}

:host([selection-appearance=border][layout=horizontal]) .container.selected:focus::before,
:host([selection-appearance=border][layout=vertical]) .container.selected:focus::before {
  block-size: 100%;
  box-shadow: inset 0 0 0 1px var(--calcite-color-brand);
  content: "";
  display: block;
  inline-size: 100%;
  inset-block-start: 0;
  inset-inline-start: 0;
  position: absolute;
}

:host([selection-appearance=border][layout=horizontal]) .container.selected {
  box-shadow: inset 0 -4px 0 0 var(--calcite-color-brand);
}

:host([selection-appearance=border][layout=vertical]) .container.selected {
  box-shadow: inset 4px 0 0 0 var(--calcite-color-brand);
}

:host([href]:focus:not([disabled])),
:host([href]:hover:not([disabled])) {
  --calcite-tile-border-color: var(--calcite-color-text-link);
  --calcite-tile-heading-text-color: var(--calcite-color-text-link);
  --calcite-ui-icon-color: var(--calcite-color-text-link);
}
:host([href]:focus:not([disabled])) .container,
:host([href]:hover:not([disabled])) .container {
  position: relative;
  z-index: var(--calcite-z-index);
}

:host([href]:active:not([disabled])) .container {
  box-shadow: 0 0 0 3px var(--calcite-tile-border-color);
}

:host([embed]) .container {
  box-shadow: none;
  padding: 0;
}

:host([selection-mode=none]) .container {
  outline-color: var(--calcite-tile-border-color);
}
:host([selection-mode=none]) .container:focus {
  outline-color: var(--calcite-color-brand);
  position: relative;
}

:host([disabled]) ::slotted([calcite-hydrated][disabled]),
:host([disabled]) [calcite-hydrated][disabled] {
  /* prevent opacity stacking */
  opacity: 1;
}

.interaction-container {
  display: contents;
}

:host(:hover:not([disabled])),
:host([active]:not([disabled])) {
  --calcite-tile-description-text-color: var(--calcite-color-text-2);
  --calcite-tile-heading-text-color: var(--calcite-color-text-1);
}

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

[hidden] {
  display: none;
}

::slotted(*) {
  max-inline-size: 100%;
}