@import '@vtmn/css-design-tokens/src/base-colors';
@import '@vtmn/css-design-tokens/src/themes/default';
@import '@vtmn/css-design-tokens/src/typography';
@import '@vtmn/css-design-tokens/src/animations';
@import '@vtmn/css-design-tokens/src/radius';

.vtmn-progressbar_container {
  max-inline-size: 100%;
  position: relative;
  color: var(--vtmn-semantic-color_content-primary);
  font-family: var(--vtmn-typo_font-family);
  font-weight: var(--vtmn-typo_font-weight--normal);
}

.vtmn-progressbar_container svg {
  display: block;
  inline-size: 100%;
  block-size: rem(8px);
  border-radius: var(--vtmn-radius_700);
  background-color: var(--vtmn-semantic-color_background-tertiary);
}

.vtmn-progressbar_label {
  margin-block-end: rem(8px);
  inline-size: 100%;
}

.vtmn-progressbar_indicator {
  inline-size: 100%;
  block-size: 100%;
  stroke: var(--vtmn-semantic-color_content-active);
  stroke-width: rem(8px);
  stroke-linecap: round;
  transition: all 200ms;
}

.vtmn-progressbar_container:not(.vtmn-progressbar_variant--circular)
  .vtmn-progressbar_label {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

/* Linear */
.vtmn-progressbar_variant--linear .vtmn-progressbar_indicator {
  --vtmn-progressbar_progress-transform: unset;

  transform: var(--vtmn-progressbar_progress-transform);
}

/* Circle */
.vtmn-progressbar_variant--circular.vtmn-progressbar_container {
  inline-size: rem(136px);
  block-size: rem(136px);
}

.vtmn-progressbar_variant--circular .vtmn-progressbar_label {
  width: fit-content;
  position: absolute;
  right: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--vtmn-typo_title-3-font-size);
  font-weight: var(--vtmn-typo_font-weight--bold);
}

.vtmn-progressbar_variant--circular .vtmn-progressbar_image {
  max-inline-size: rem(112px);
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  block-size: auto;
  position: absolute;
}

.vtmn-progressbar_variant--circular svg {
  inline-size: 100%;
  block-size: 100%;
  background-color: transparent;
}

.vtmn-progressbar_variant--circular .vtmn-progressbar_track {
  inline-size: rem(128px);
  block-size: rem(128px);
  stroke-width: rem(8px);
  fill: transparent;
  stroke: var(--vtmn-semantic-color_background-tertiary);
}

.vtmn-progressbar_variant--circular .vtmn-progressbar_indicator {
  inline-size: rem(128px);
  block-size: rem(128px);
  transform-origin: center;
  transform: rotate(-90deg);
  fill: transparent;
  stroke-dasharray: 400;
}

/* SIZES */

/* Small */
.vtmn-progressbar_size--small.vtmn-progressbar_variant--circular.vtmn-progressbar_container {
  inline-size: rem(70px);
  block-size: rem(70px);
}

.vtmn-progressbar_size--small.vtmn-progressbar_variant--circular
  .vtmn-progressbar_label {
  font-size: var(--vtmn-typo_text-1-font-size);
  font-weight: var(--vtmn-typo_font-weight--normal);
}

.vtmn-progressbar_size--small.vtmn-progressbar_variant--circular
  .vtmn-progressbar_track {
  inline-size: rem(64px);
  block-size: rem(64px);
  stroke-width: rem(4px);
}

.vtmn-progressbar_size--small.vtmn-progressbar_variant--circular
  .vtmn-progressbar_indicator {
  inline-size: rem(64px);
  block-size: rem(64px);
  stroke-width: rem(4px);
  stroke-dasharray: 200;
}

.vtmn-progressbar_size--small.vtmn-progressbar_variant--circular
  > .vtmn-progressbar_image {
  max-inline-size: rem(56px);
}

.vtmn-progressbar_size--small:not(.vtmn-progressbar_variant--circular) {
  font-size: var(--vtmn-typo_text-3-font-size);
}

.vtmn-progressbar_size--small:not(.vtmn-progressbar_variant--circular)
  .vtmn-progressbar_labels {
  margin-block-end: rem(4px);
}

.vtmn-progressbar_size--small:not(.vtmn-progressbar_variant--circular) svg {
  block-size: rem(4px);
}

.vtmn-progressbar_size--small:not(.vtmn-progressbar_variant--circular)
  .vtmn-progressbar_indicator {
  stroke-width: rem(4px);
}

/* Medium (default) */
.vtmn-progressbar_size--medium {
  font-size: var(--vtmn-typo_text-2-font-size);
}

.vtmn-progressbar_size--medium .vtmn-progressbar_labels {
  margin-block-end: rem(8px);
}

.vtmn-progressbar_size--medium svg {
  block-size: rem(8px);
}

.vtmn-progressbar_size--medium .vtmn-progressbar_indicator {
  stroke-width: rem(8px);
}

/* Large */
.vtmn-progressbar_size--large {
  font-size: var(--vtmn-typo_text-2-font-size);
}

.vtmn-progressbar_size--large .vtmn-progressbar_labels {
  margin-block-end: rem(8px);
}

.vtmn-progressbar_size--large svg {
  block-size: rem(16px);
}

.vtmn-progressbar_size--large .vtmn-progressbar_indicator {
  stroke-width: rem(16px);
}

/* INDETERMINATE */

/* Linear */
.vtmn-progressbar--indeterminate .vtmn-progressbar_indicator {
  position: absolute;
  animation: var(--vtmn-animation_linear-indeterminate);
}

/* Circle */
.vtmn-progressbar_variant--circular.vtmn-progressbar--indeterminate
  .vtmn-progressbar_indicator {
  position: absolute;
  animation: var(--vtmn-animation_circle-indeterminate);
}

.vtmn-progressbar_variant--circular.vtmn-progressbar_size--small.vtmn-progressbar--indeterminate
  .vtmn-progressbar_indicator {
  position: absolute;
  animation: var(--vtmn-animation_circle-indeterminate-small);
}
