// Name:            stepper
// Description:     Navigate throgh list of items
//
// Component:       `c-stepper`
//
// Dependencies:    `settings/v7/colors.tokens`
//                  `settings/v7/colors.mode`
//
// ========================================================================
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;
@use '../../../assets/sass/tools/v7/typography' as *;

.c-stepper {
  --stepper-item-size: 2rem;
  --stepper-line: 2px;

  &.c-stepper--numberless ul {
    gap: 2px;
  }

  &__element {
    min-width: var(--stepper-item-size);
    height: var(--stepper-item-size);
    border: var(--stepper-line) solid var(--link-color-primary);
    border-radius: 50%;
    background-color: var(--background-color);

    .c-stepper--numberless & {
      --stepper-item-size: 4px;
      width: 100%;
      border: none;
      border-radius: 0;
      background-color: $ui-04;
    }
    
    &--active {
      background-color: var(--link-color-primary);
      color: $inverse-01;
      
      .c-stepper--numberless & {
        background-color: var(--link-color-primary);
      }
    }

    
  }

  &__line{
    top: 50%;
    height: var(--stepper-line);
    background: $interactive-01;

    .c-stepper--numberless & {
      --stepper-line: 4px;
      top: 0;
      background-color: $ui-01;
    }
  }
}