/**
 * @license
 * Copyright Endlessjs. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */

@mixin el-stepper-theme {

  el-stepper {

    &.horizontal {
      .header .step {
        width: el-theme(stepper-step-index-width);
        margin: 0 el-theme(stepper-step-index-width) / 2;
      }

      .header .connector {
        margin: el-theme(stepper-horizontal-connector-margin);
      }
    }

    &.vertical {
      .header .connector {
        margin: el-theme(stepper-vertical-connector-margin);
      }
    }

    .header {
      .connector {
        background-color: el-theme(stepper-connector-background-color);
      }

      .connector-past {
        background-color: el-theme(stepper-connector-completed-background-color);
      }

      .label-index {
        border-radius: el-theme(stepper-step-index-border-radius);
        border-color: el-theme(stepper-step-index-border-color);
        border-style: el-theme(stepper-step-index-border-style);
        border-width: el-theme(stepper-step-index-border-width);
        width: el-theme(stepper-step-index-width);
        height: el-theme(stepper-step-index-width);
      }

      .step {
        color: el-theme(stepper-step-text-color);
        font-family: el-theme(stepper-step-text-font-family);
        font-size: el-theme(stepper-step-text-font-size);
        font-weight: el-theme(stepper-step-text-font-weight);
        line-height: el-theme(stepper-step-text-line-height);

        &.label-index {
          border-color: el-theme(stepper-step-index-border-color);
        }

        &.selected {
          color: el-theme(stepper-step-active-text-color);

          .label-index {
            border-color: el-theme(stepper-step-index-active-border-color);
          }
        }

        &.completed {
          color: el-theme(stepper-step-completed-text-color);

          .label-index {
            background-color: el-theme(stepper-step-index-completed-background-color);
            border-color: el-theme(stepper-step-index-completed-border-color);
            color: el-theme(stepper-step-index-completed-text-color);
          }
        }
      }
    }

    .step-content {
      padding: el-theme(stepper-step-content-padding);
    }
  }
}