@import "../tokens/colors";
@import "../utilities/colors";
@import "../tokens/spacing";
@import "../tokens/opacity";
@import "../tokens/typography";

[class^=pb_progress_step_kit]{
    list-style:none;
    display: flex;

  [class*=pb_progress_step_item] {
    display:flex;
    flex-basis:100%;
    flex-direction:column;
    justify-content:space-between;
    position: relative;
    align-items: center;
    
    .circle {
        height:14px;
        width:14px;
        border-radius:100%;  
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 3;
        box-shadow: 0 0 0 2px $white;

        svg {
            width:10px;
            height:10px;
            opacity: 0;
            color: $white;
        }
    }

    &::before{
        content: '';
        height: 4px;
        position: absolute;
        top: 5px;
        left: -50%;
        width:100%;
        background-color:$border_light;
    }

    &:last-child::after, &:first-child::before {
        display:none;
    }

    &[class*=_inactive]{
        .circle{
            background-color: $border_light;
            color: $border_light;
        }
    }
    &[class*=_active]{
        .circle{
            background-color: $white;
            border: solid 2px $primary;
            color: rgba($color: $primary, $alpha: 0)
        }
        &::before{
            background-color: $primary;
        }
    }
    &[class*=_complete]{
        .circle{
            background-color: $primary;
            color:$white;
        }
        &::before{
            background-color: $primary;
        }
    }
  }

  &[class*=horizontal]{
    flex-direction: row;
  }

  &[class*=vertical]{
    flex-direction: column; 
    [class*=pb_progress_step_item]{
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        margin: 8px;
        &::before {
            display: flex;
            flex-direction: column;
            content: '';
            height: 100%;
            position: absolute;
            top:14px;
            left: 13px;
            width:4px;
            background-color:$border_light;
        }
        &:last-child::before{
            display:none;
        }
        .circle{
            margin: 0 8px;
        }
    }
  }

  &[class*=icon] [class*=_complete] svg{
    opacity: 1;
  }

  &[class*=dark] {
    .circle{
        box-shadow: 0 0 0 2px $bg_dark;
    }
    [class*=active]{
        .circle{
            background-color: $bg_dark;
        }
    }
    [class*=inactive]{
        .circle, &::before{
           background-color: tint($bg_dark,10%);
        }
    }
  }
  &[class*=tracker] {
    .circle{
        box-shadow: none;
    }
    li[class*=pb_progress_step_item]{
        flex-direction: column-reverse;
        &::before{
            background-color: $border_light;
            top:auto;
            bottom: 5px;
        }
    }
    li[class*=active] .circle,li[class*=inactive] .circle{
        background-color: $border_light;
        border:none;
    }
    li[class*=complete]{
        .circle, &::before {
            background-color: $teal;
        }
    }
  }

}