@tailwind components;

/**
 * @prop --mds-progress-background: Sets the background-color of the component
 * @prop --mds-progress-color: Sets the background-color of the progress
 * @prop --mds-progress-duration: Sets the duration of the progress bar animation
 * @prop --mds-progress-radius: Sets the border-radius of the component
 * @prop --mds-progress-thickness: Sets the thickness of the progress bar
 */

:host {
  --mds-progress-background: rgb(var(--tone-neutral-08));
  --mds-progress-color: rgb(var(--variant-primary-03));
  --mds-progress-duration: 750ms;
  --mds-progress-radius: 0.5rem;
  --mds-progress-thickness: 0.5rem;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  background-color: var(--mds-progress-background);
  border-radius: var(--mds-progress-radius);
  display: flex;
  height: var(--mds-progress-thickness);
  min-width: var(--mds-progress-thickness);
  overflow: hidden;
  position: relative;
  transition-property: background-color;
  width: 100%;
}

:host([direction="vertical"]) {
  flex-direction: column;
  height: unset;
  min-height: var(--mds-progress-thickness);
  width: var(--mds-progress-thickness);
}

.progress{
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);

  background-color: var(--mds-progress-color);
  border-radius: var(--mds-progress-radius);
  transition-duration: var(--mds-progress-duration);
  transition-property: background-color, flex-grow;
}

:host([variant="dark"]) {
  --mds-progress-color: rgb(var(--tone-neutral-04));
  --mds-progress-background: rgb(var(--tone-neutral-08));
}

:host([variant="light"]) {
  --mds-progress-color: rgb(var(--tone-neutral));
  --mds-progress-background: rgb(var(--tone-neutral-05));
}

:host([variant="error"]) {
  --mds-progress-color: rgb(var(--status-error-05));
  --mds-progress-background: rgb(var(--status-error-09));
}

:host([variant="warning"]) {
  --mds-progress-color: rgb(var(--status-warning-05));
  --mds-progress-background: rgb(var(--status-warning-09));
}

:host([variant="success"]) {
  --mds-progress-color: rgb(var(--status-success-05));
  --mds-progress-background: rgb(var(--status-success-09));
}

:host([variant="info"]) {
  --mds-progress-color: rgb(var(--status-info-05));
  --mds-progress-background: rgb(var(--status-info-09));
}

:host([variant="primary"]) {
  --mds-progress-color: rgb(var(--variant-primary-03));
  --mds-progress-background: rgb(var(--tone-neutral-08));
}

:host([variant="ai"]) {
  --mds-progress-color: rgb(var(--variant-ai-05));
  --mds-progress-background: rgb(var(--variant-ai-09));
}

:host-context(.pref-animation-reduce),
:host-context(.pref-animation-reduce) .progress {
  transition-duration: 0s;
}

@media (prefers-reduced-motion) {
  :host-context(.pref-animation-system),
  :host-context(.pref-animation-system) .progress {
    transition-duration: 0s;
  }
}

:host-context(.pref-theme-dark):host([variant="primary"]) {
  --mds-progress-color: rgb(var(--variant-primary-05));
  --mds-progress-background: rgb(var(--tone-neutral-07));
}

:host-context(.pref-theme-dark):host([variant="dark"]) {
  --mds-progress-color: rgb(var(--tone-neutral-04));
  --mds-progress-background: rgb(var(--tone-neutral-08));
}

:host-context(.pref-theme-dark):host([variant="error"]) {
  --mds-progress-color: rgb(var(--status-error-04));
  --mds-progress-background: rgb(var(--status-error-07));
}

:host-context(.pref-theme-dark):host([variant="warning"]) {
  --mds-progress-color: rgb(var(--status-warning-04));
  --mds-progress-background: rgb(var(--status-warning-07));
}

:host-context(.pref-theme-dark):host([variant="success"]) {
  --mds-progress-color: rgb(var(--status-success-04));
  --mds-progress-background: rgb(var(--status-success-07));
}

:host-context(.pref-theme-dark):host([variant="info"]) {
  --mds-progress-color: rgb(var(--status-info-04));
  --mds-progress-background: rgb(var(--status-info-07));
}


@media (prefers-color-scheme: dark) {
  :host-context(.pref-theme-system):host([variant="primary"]) {
    --mds-progress-color: rgb(var(--variant-primary-05));
    --mds-progress-background: rgb(var(--tone-neutral-07));
  }

  :host-context(.pref-theme-system):host([variant="dark"]) {
    --mds-progress-color: rgb(var(--tone-neutral-04));
    --mds-progress-background: rgb(var(--tone-neutral-08));
  }

  :host-context(.pref-theme-system):host([variant="error"]) {
    --mds-progress-color: rgb(var(--status-error-04));
    --mds-progress-background: rgb(var(--status-error-07));
  }

  :host-context(.pref-theme-system):host([variant="warning"]) {
    --mds-progress-color: rgb(var(--status-warning-04));
    --mds-progress-background: rgb(var(--status-warning-07));
  }

  :host-context(.pref-theme-system):host([variant="success"]) {
    --mds-progress-color: rgb(var(--status-success-04));
    --mds-progress-background: rgb(var(--status-success-07));
  }

  :host-context(.pref-theme-system):host([variant="info"]) {
    --mds-progress-color: rgb(var(--status-info-04));
    --mds-progress-background: rgb(var(--status-info-07));
  }
}

:host-context(.pref-contrast-more),
:host-context(.pref-contrast-more):host([variant="primary"]) {
  --mds-progress-color: rgb(var(--variant-primary-05));
  --mds-progress-background: rgb(var(--tone-neutral-07));
}

@media (prefers-contrast: more) {
  :host-context(.pref-contrast-system),
  :host-context(.pref-contrast-more):host([variant="primary"]) {
    --mds-progress-color: rgb(var(--variant-primary-05));
    --mds-progress-background: rgb(var(--tone-neutral-07));
  }
}

:host(:not(:is([hydrated], .hydrated))) {
  animation-duration: 0s;
  border-color: transparent;
  box-shadow: 0 0 0 transparent;
  opacity: 0;
  outline-color: transparent;
  transition-delay: 0s;
  transition-duration: 0s;
  visibility: hidden;
}

/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */

mds-accordion:not(:is([hydrated], .hydrated)),
mds-accordion-item:not(:is([hydrated], .hydrated)),
mds-accordion-timer:not(:is([hydrated], .hydrated)),
mds-accordion-timer-item:not(:is([hydrated], .hydrated)),
mds-author:not(:is([hydrated], .hydrated)),
mds-avatar:not(:is([hydrated], .hydrated)),
mds-badge:not(:is([hydrated], .hydrated)),
mds-banner:not(:is([hydrated], .hydrated)),
mds-benchmark-bar:not(:is([hydrated], .hydrated)),
mds-bibliography:not(:is([hydrated], .hydrated)),
mds-breadcrumb:not(:is([hydrated], .hydrated)),
mds-breadcrumb-item:not(:is([hydrated], .hydrated)),
mds-button:not(:is([hydrated], .hydrated)),
mds-card:not(:is([hydrated], .hydrated)),
mds-card-content:not(:is([hydrated], .hydrated)),
mds-card-footer:not(:is([hydrated], .hydrated)),
mds-card-header:not(:is([hydrated], .hydrated)),
mds-card-media:not(:is([hydrated], .hydrated)),
mds-chip:not(:is([hydrated], .hydrated)),
mds-details:not(:is([hydrated], .hydrated)),
mds-dropdown:not(:is([hydrated], .hydrated)),
mds-entity:not(:is([hydrated], .hydrated)),
mds-file:not(:is([hydrated], .hydrated)),
mds-file-preview:not(:is([hydrated], .hydrated)),
mds-filter:not(:is([hydrated], .hydrated)),
mds-filter-item:not(:is([hydrated], .hydrated)),
mds-header:not(:is([hydrated], .hydrated)),
mds-header-bar:not(:is([hydrated], .hydrated)),
mds-help:not(:is([hydrated], .hydrated)),
mds-horizontal-scroll:not(:is([hydrated], .hydrated)),
mds-hr:not(:is([hydrated], .hydrated)),
mds-icon:not(:is([hydrated], .hydrated)),
mds-img:not(:is([hydrated], .hydrated)),
mds-input:not(:is([hydrated], .hydrated)),
mds-input-field:not(:is([hydrated], .hydrated)),
mds-input-range:not(:is([hydrated], .hydrated)),
mds-input-select:not(:is([hydrated], .hydrated)),
mds-input-switch:not(:is([hydrated], .hydrated)),
mds-input-tip:not(:is([hydrated], .hydrated)),
mds-input-tip-item:not(:is([hydrated], .hydrated)),
mds-input-upload:not(:is([hydrated], .hydrated)),
mds-keyboard:not(:is([hydrated], .hydrated)),
mds-keyboard-key:not(:is([hydrated], .hydrated)),
mds-kpi:not(:is([hydrated], .hydrated)),
mds-kpi-item:not(:is([hydrated], .hydrated)),
mds-label:not(:is([hydrated], .hydrated)),
mds-list:not(:is([hydrated], .hydrated)),
mds-list-item:not(:is([hydrated], .hydrated)),
mds-modal:not(:is([hydrated], .hydrated)),
mds-note:not(:is([hydrated], .hydrated)),
mds-notification:not(:is([hydrated], .hydrated)),
mds-paginator:not(:is([hydrated], .hydrated)),
mds-paginator-item:not(:is([hydrated], .hydrated)),
mds-pref:not(:is([hydrated], .hydrated)),
mds-pref-animation:not(:is([hydrated], .hydrated)),
mds-pref-consumption:not(:is([hydrated], .hydrated)),
mds-pref-contrast:not(:is([hydrated], .hydrated)),
mds-pref-language:not(:is([hydrated], .hydrated)),
mds-pref-language-item:not(:is([hydrated], .hydrated)),
mds-pref-theme:not(:is([hydrated], .hydrated)),
mds-price-table:not(:is([hydrated], .hydrated)),
mds-price-table-features:not(:is([hydrated], .hydrated)),
mds-price-table-features-cell:not(:is([hydrated], .hydrated)),
mds-price-table-features-row:not(:is([hydrated], .hydrated)),
mds-price-table-header:not(:is([hydrated], .hydrated)),
mds-price-table-list:not(:is([hydrated], .hydrated)),
mds-price-table-list-item:not(:is([hydrated], .hydrated)),
mds-progress:not(:is([hydrated], .hydrated)),
mds-push-notification:not(:is([hydrated], .hydrated)),
mds-push-notifications:not(:is([hydrated], .hydrated)),
mds-quote:not(:is([hydrated], .hydrated)),
mds-separator:not(:is([hydrated], .hydrated)),
mds-spinner:not(:is([hydrated], .hydrated)),
mds-stepper-bar:not(:is([hydrated], .hydrated)),
mds-stepper-bar-item:not(:is([hydrated], .hydrated)),
mds-tab:not(:is([hydrated], .hydrated)),
mds-tab-bar:not(:is([hydrated], .hydrated)),
mds-tab-bar-item:not(:is([hydrated], .hydrated)),
mds-tab-item:not(:is([hydrated], .hydrated)),
mds-table:not(:is([hydrated], .hydrated)),
mds-table-body:not(:is([hydrated], .hydrated)),
mds-table-cell:not(:is([hydrated], .hydrated)),
mds-table-footer:not(:is([hydrated], .hydrated)),
mds-table-header:not(:is([hydrated], .hydrated)),
mds-table-header-cell:not(:is([hydrated], .hydrated)),
mds-table-row:not(:is([hydrated], .hydrated)),
mds-text:not(:is([hydrated], .hydrated)),
mds-toast:not(:is([hydrated], .hydrated)),
mds-tooltip:not(:is([hydrated], .hydrated)),
mds-tree:not(:is([hydrated], .hydrated)),
mds-tree-item:not(:is([hydrated], .hydrated)),
mds-url-view:not(:is([hydrated], .hydrated)),
mds-usage:not(:is([hydrated], .hydrated)),
mds-video-wall:not(:is([hydrated], .hydrated)),
mds-zero:not(:is([hydrated], .hydrated))
{
  animation-duration: 0s;
  border-color: transparent;
  box-shadow: 0 0 0 transparent;
  opacity: 0;
  outline-color: transparent;
  transition-delay: 0s;
  transition-duration: 0s;
  visibility: hidden;
}