/* Copyright (c) Fortanix, Inc.
|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@use '../../../styling/defs.scss' as bk;

@layer baklava.components {
  .bk-stepper {
    @include bk.component-base(bk-stepper);
    
    --bk-stepper-indicator-size: #{bk.rem-from-px(28)};
    display: flex;
    
    > ol {
      display: contents;
    }
    
    &.bk-stepper--horizontal {
      flex-direction: row;
      column-gap: bk.$spacing-9;
    }
    
    &.bk-stepper--vertical {
      flex-direction: column;
      row-gap: bk.$spacing-9;
      
      // Draw a line between subsequent items
      li + li .bk-stepper__item__indicator {
        &::before {
          content: '';
          position: absolute;
          inset-block-start: calc(-1 * bk.$spacing-9 - bk.$size-2);
          inset-inline-start: calc(50% - bk.$size-2 / 2);
          inline-size: 0;
          block-size: bk.$spacing-9;
          border-inline-start: bk.$size-2 solid bk.$theme-stepper-border-disabled;
        }
      }
    }
    
    .bk-stepper__item {
      cursor: pointer;
      
      display: flex;
      align-items: center;
      color: bk.$theme-stepper-text-disabled;
      
      .bk-stepper__item__indicator {
        position: relative; // Needed for the vertical line `position: absolute`
        flex-shrink: 0;
        
        margin-inline-end: bk.$spacing-3;
        aspect-ratio: 1;
        inline-size: var(--bk-stepper-indicator-size);
        
        border: bk.$size-2 solid #{bk.$theme-stepper-border-disabled};
        border-radius: 50%;
        font-weight: bk.$font-weight-bold;
        font-size: bk.$font-size-m;
        
        display: grid;
        place-content: center;
        
        .bk-stepper__item__indicator__icon {
          font-size: bk.$font-size-xs;
        }
      }
      
      .bk-stepper__item__title {
        font-size: bk.$font-size-m;
      }
      
      .bk-stepper__item__optional {
        margin-inline-start: bk.$spacing-2;
        font-size: bk.$font-size-xs;
      }
    }
    
    // Any steps we've already visited
    .bk-stepper__item--checked {
      color: bk.$theme-stepper-text-selected;
      
      .bk-stepper__item__indicator {
        border-color: bk.$theme-stepper-border-default;
      }
    }
    
    // The currently active step
    [aria-current="step"] {
      .bk-stepper__item {
        color: bk.$theme-stepper-text-selected;
        
        .bk-stepper__item__indicator {
          border-color: bk.$theme-stepper-border-default;
          background-color: bk.$theme-stepper-background-default;
          color: bk.$theme-stepper-text-selected-number;
        }
      }
    }
    
    .bk-stepper__item--disabled {
      cursor: not-allowed;
    }
  }
}
