@use "@angular/material" as mat;
@mixin sc-status-timeline-theme($theme) {
  $primary: map-get($theme, primary);
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);
  $is-dark-theme: map-get($theme, is-dark);

  $selected-bg-color: if(
    $is-dark-theme,
    rgba(255,255,255, 0.08),
    rgba(0,0,0, 0.08)
  );

  .status-timeline {
    &.--nav {
      .status-timeline {
        &__item {
 
          &.selected::after {
            background-color: $selected-bg-color;
          }

          &:not(.selected):hover::after,
          &:not(.selected):focus::after {
            background-color: mat.get-color-from-palette($background, hover);
          }
        }
      }
    }

    &__btn-prev,
    &__btn-next {
      border-color: mat.get-color-from-palette($foreground, divider) !important;
    }

    &__item {
      .status {
        &__container {
          &::before,
          &::after {
            border-color: mat.get-color-from-palette($foreground, divider) !important;
          }
        }

        &__indicator {
          background-color: mat.get-color-from-palette($background, hover);
          border-color: mat.get-color-from-palette($foreground, divider) !important;

          &.--locked {
            .mat-icon {
              color: mat.get-color-from-palette($foreground, disabled-text);
            }
          }

          &.--in-progress {
            background-color: mat.get-color-from-palette($background, card);
            border-color: mat.get-color-from-palette($primary, 500) !important;

            .mat-icon {
              color: mat.get-color-from-palette($primary, 500);
            }
          }

          &.--done {
            background-color: mat.get-color-from-palette($primary, 500);
            border-color: mat.get-color-from-palette($primary, 500) !important;

            .mat-icon {
              color: mat.get-contrast-color-from-palette($primary, 500);
            }
          }
        }
      }

      .content {
        &__container {
          .caption {
            color: mat.get-color-from-palette($foreground, secondary-text);
          }
        }
      }
    }

    &.--horizontal {
      .status-timeline {
        &__item {
          &:first-child .status__container::before {
            border-color: transparent !important;
          }

          &:last-child .status__container::after {
            border-color: transparent !important;
          }
        }
      }
    }
  }
}