/**
 * @license
 * Copyright 2023 Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
@use '@material/theme/theme' as mdc-theme;
@use '../../theme';
@use '../step/variables';

@mixin core-styles {
  .forge-stepper {
    @include base;

    &:not(.forge-stepper--vertical) {
      ::slotted(*) {
        display: flex;
        align-items: center;
        position: relative;
        min-width: 112px;
      }
    }

    &--fixed {
      ::slotted(*) {
        flex: 1;
      }
    }

    &--alternative {
      @include alternative-base;

      ::slotted(*) {
        min-width: 160px;
      }
    }

    &--align-left {
      @include align-left;
    }

    &--align-center {
      @include align-center;
    }

    &--align-right {
      @include align-right;
    }
  }
}

@mixin base() {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}

@mixin align-left() {
  justify-content: flex-start;
}

@mixin align-center() {
  justify-content: center;
}

@mixin align-right() {
  justify-content: flex-end;
}

@mixin step-line() {
  @include theme.property(border-top-color, border-color);

  content: '';
  position: relative;
  height: 0;
  min-width: 10px;
  flex: 1;
  flex-basis: 0.000000001px;
  border-top-style: solid;
  border-top-width: 1px;
  border-radius: 1px 0 0 1px;
}

@mixin icon-selected() {
  @include mdc-theme.property(background-color, primary);
  @include mdc-theme.property(color, on-primary);
}

@mixin label() {
  @include mdc-theme.property(color, text-secondary-on-background);

  display: inline-block;
  font-size: variables.$label-font-size;
  font-weight: variables.$label-font-weight;
  transition: color 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
  margin-right: variables.$spacer-margin;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}

@mixin alternative-base {
  align-items: flex-start;
}

@mixin vertical-base {
  display: unset;
  align-items: unset;
  white-space: unset;
  overflow: unset;
}
