@import '../../themes/default/elements/step.variables';

@if $use-step {
  /*******************************
  //@-        Step
  *******************************/

  .ui.steps {
    display: inline-flex;
    flex-direction: row;
    align-items: stretch;
    margin: $step-margin;
    background: $step-steps-background;
    box-shadow: $step-steps-box-shadow;
    line-height: $step-line-height;
    border-radius: $step-steps-border-radius;
    border: $step-steps-border;
  }
  .ui.steps:not(.unstackable) {
    flex-wrap: wrap;
  }

  /* First Steps */
  .ui.steps:first-child {
    margin-top: 0;
  }

  /* Last Steps */
  .ui.steps:last-child {
    margin-bottom: 0;
  }


  /*******************************
            Singular
  *******************************/

  .ui.steps .step {
    position: relative;
    display: flex;
    flex: 1 0 auto;
    flex-wrap: wrap;
    flex-direction: row;
    vertical-align: middle;
    align-items: center;
    justify-content: $step-justify-content;

    margin: $step-vertical-margin $step-horizontal-margin;
    padding: $step-vertical-padding $step-horizontal-padding;
    background: $step-background;
    color: $text-color;
    box-shadow: $step-box-shadow;
    border-radius: $step-border-radius;
    border: $step-border;
    border-right: $step-divider;
    transition: $step-transition;
  }

  /* Arrow */
  .ui.steps .step:after {
    display: none;
    position: absolute;
    z-index: 2;
    content: '';
    top: $step-arrow-top-offset;
    right: $step-arrow-right-offset;
    border: medium none;
    background-color: $step-arrow-background-color;
    width: $step-arrow-size;
    height: $step-arrow-size;

    border-style: solid;
    border-color: $border-color;
    border-width: $step-arrow-border-width;

    transition: $step-transition;
    transform: translateY(-50%) translateX(50%) rotate(-45deg);
  }

  /* First Step */
  .ui.steps .step:first-child {
    padding-left: $step-horizontal-padding;
    border-radius: $step-steps-border-radius 0 0 $step-steps-border-radius;
  }

  /* Last Step */
  .ui.steps .step:last-child {
    border-radius: 0 $step-steps-border-radius $step-steps-border-radius 0;
    border-right: none;
    margin-right: 0;
  }

  /* Only Step */
  .ui.steps .step:only-child {
    border-radius: $step-steps-border-radius;
  }


  /*******************************
              Content
  *******************************/

  /* Title */
  .ui.steps .step .title {
    font-family: $step-title-font-family;
    font-size: $step-title-font-size;
    font-weight: $step-title-font-weight;
  }
  .ui.steps .step > .title {
    width: 100%;
  }

  /* Description */
  .ui.steps .step .description {
    font-weight: $step-description-font-weight;
    font-size: $step-description-font-size;
    color: $step-description-color;
  }
  .ui.steps .step > .description {
    width: 100%;
  }
  .ui.steps .step .title ~ .description {
    margin-top: $step-description-distance;
  }

  /* Icon */
  .ui.steps .step > .icon {
    line-height: 1;
    font-size: $step-icon-size;
    margin: 0 $step-icon-distance 0 0;
  }
  .ui.steps .step > .icon,
  .ui.steps .step > .icon ~ .content {
    display: block;
    flex: 0 1 auto;
    align-self: $step-icon-align;
  }

  /* Horizontal Icon */
  .ui.steps:not(.vertical) .step > .icon {
    width: auto;
  }

  /* Link */
  .ui.steps .link.step,
  .ui.steps a.step {
    cursor: pointer;
  }

  /*******************************
              Types
  *******************************/

  @if($use-step-type-ordered) {
    /*--------------
        Ordered
    ---------------*/

    .ui.ordered.steps {
      counter-reset: ordered;
    }
    .ui.ordered.steps .step:before {
      display: block;
      position: static;
      text-align: center;
      content: counter(ordered);
      align-self: $step-icon-align;
      margin-right: $step-icon-distance;
      font-size: $step-icon-size;
      counter-increment: ordered;
      font-family: $step-ordered-font-family;
      font-weight: $step-ordered-font-weight;
    }

    .ui.ordered.steps .step > * {
      display: block;
      align-self: $step-icon-align;
    }
  }

  @if($use-step-type-vertical) {
    /*--------------
        Vertical
    ---------------*/

    .ui.vertical.steps {
      display: inline-flex;
      flex-direction: column;
      overflow: visible;
    }
    .ui.vertical.steps .step {
      justify-content: flex-start;
      border-radius: $step-border-radius;
      padding: $step-vertical-padding $step-horizontal-padding;
      border-right: none;
      border-bottom: $step-vertical-divider;
    }
    .ui.vertical.steps .step:first-child {
      padding: $step-vertical-padding $step-horizontal-padding;
      border-radius: $step-steps-border-radius $step-steps-border-radius 0 0;
    }
    .ui.vertical.steps .step:last-child {
      border-bottom: none;
      border-radius: 0 0 $step-steps-border-radius $step-steps-border-radius;
    }
    .ui.vertical.steps .step:only-child {
      border-radius: $step-steps-border-radius;
    }


    /* Arrow */
    .ui.vertical.steps .step:after {
      top: $step-vertical-arrow-top-offset;
      right: $step-vertical-arrow-right-offset;
      border-width: $step-vertical-arrow-border-width;
      display: $step-vertical-arrow-display;
    }

    .ui.vertical.steps .active.step:after {
      display: $step-vertical-active-arrow-display;
    }
    .ui.vertical.steps .step:last-child:after {
      display: $step-vertical-last-arrow-display;
    }
    .ui.vertical.steps .active.step:last-child:after {
      display: $step-vertical-active-last-arrow-display;
    }
  }

  /*---------------
      Responsive
  ----------------*/

  /* Mobile (Default) */
  @media only screen and (max-width: ($largest-mobile-screen)) {

    .ui.steps:not(.unstackable) {
      display: inline-flex;
      overflow: visible;
      flex-direction: column;
    }
    .ui.steps:not(.unstackable) .step {
      width: 100% !important;
      flex-direction: column;
      border-radius: $step-border-radius;
      padding: $step-vertical-padding $step-horizontal-padding;
      border-right: none;
      border-bottom: $step-steps-border;
    }
    .ui.steps:not(.unstackable) .step:first-child {
      padding: $step-vertical-padding $step-horizontal-padding;
      border-radius: $step-steps-border-radius $step-steps-border-radius 0 0;
    }
    .ui.steps:not(.unstackable) .step:last-child {
      border-radius: 0 0 $step-steps-border-radius $step-steps-border-radius;
      border-bottom: none;
    }

    /* Arrow */
    .ui.steps:not(.unstackable) .step:after {
      top: unset;
      bottom: -$step-arrow-size;
      right: 50%;
      transform: translateY(-50%) translateX(50%) rotate(45deg);
    }
    .ui.vertical.steps .active.step:last-child:after {
      display: none;
    }
    /* Content */
    .ui.steps:not(.unstackable) .step .content {
      text-align: center;
    }

    /* Icon */
    .ui.steps:not(.unstackable) .step > .icon,
    .ui.ordered.steps:not(.unstackable) .step:before {
      margin: 0 0 $step-mobile-icon-distance 0;
    }

  }

  /*******************************
              States
  *******************************/

  /* Link Hover */
  .ui.steps .link.step:hover::after,
  .ui.steps .link.step:hover,
  .ui.steps a.step:hover::after,
  .ui.steps a.step:hover {
    background: $step-hover-background;
    color: $step-hover-color;
  }

  /* Link Down */
  .ui.steps .link.step:active::after,
  .ui.steps .link.step:active,
  .ui.steps a.step:active::after,
  .ui.steps a.step:active {
    background: $step-down-background;
    color: $step-down-color;
  }

  /* Active */
  .ui.steps .step.active {
    cursor: auto;
    background: $step-active-background;
  }
  .ui.steps .step.active:after {
    background: $step-active-background;
  }
  .ui.steps .step.active .title {
    color: $step-active-color;
  }
  .ui.ordered.steps .step.active:before,
  .ui.steps .active.step .icon {
    color: $step-active-icon-color;
  }

  /* Active Arrow */
  .ui.steps .step:after {
    display: $step-arrow-display;
  }
  .ui.steps .active.step:after {
    display: $step-active-arrow-display;
  }
  .ui.steps .step:last-child:after {
    display: $step-last-arrow-display;
  }
  .ui.steps .active.step:last-child:after {
    display: $step-active-last-arrow-display;
  }

  /* Active Hover */
  .ui.steps .link.active.step:hover::after,
  .ui.steps .link.active.step:hover,
  .ui.steps a.active.step:hover::after,
  .ui.steps a.active.step:hover {
    cursor: pointer;
    background: $step-active-hover-background;
    color: $step-active-hover-color;
  }

  /* Completed */
  .ui.steps .step.completed > .icon:before,
  .ui.ordered.steps .step.completed:before {
    color: $step-completed-color;
  }

  /* Disabled */
  .ui.steps .disabled.step {
    cursor: auto;
    background: $step-disabled-background;
    pointer-events: none;
  }
  .ui.steps .disabled.step,
  .ui.steps .disabled.step .title,
  .ui.steps .disabled.step .description {
    color: $step-disabled-color;
  }
  .ui.steps .disabled.step:after {
    background: $step-disabled-background;
  }


  /*******************************
            Variations
  *******************************/


  /*--------------
    Stackable
  ---------------*/

  /* Tablet Or Below */
  @media only screen and (max-width: $largest-tablet-screen) {

  .ui[class*="tablet stackable"].steps {
    display: inline-flex;
    overflow: visible;
    flex-direction: column;
  }

  /* Steps */
  .ui[class*="tablet stackable"].steps .step {
    flex-direction: column;
    border-radius: $step-border-radius;
    padding: $step-vertical-padding $step-horizontal-padding;
    border-right: none;
    border-bottom: $step-steps-border;
  }
  .ui[class*="tablet stackable"].steps .step:first-child {
    padding: $step-vertical-padding $step-horizontal-padding;
    border-radius: $step-steps-border-radius $step-steps-border-radius 0 0;
  }
  .ui[class*="tablet stackable"].steps .step:last-child {
    border-radius: 0 0 $step-steps-border-radius $step-steps-border-radius;
    border-bottom: none;
  }

  /* Arrow */
  .ui[class*="tablet stackable"].steps .step:after {
    top: unset;
    bottom: -$step-arrow-size;
    right: 50%;
    transform: translateY(-50%) translateX(50%) rotate(45deg);
  }

  /* Content */
  .ui[class*="tablet stackable"].steps .step .content {
    text-align: center;
  }

  /* Icon */
  .ui[class*="tablet stackable"].steps .step > .icon,
  .ui[class*="tablet stackable"].ordered.steps .step:before {
    margin: 0 0 $step-mobile-icon-distance 0;
  }

  }

  /*--------------
        Fluid
  ---------------*/

  /* Fluid */
  .ui.fluid.steps {
    display: flex;
    width: 100%;
  }


  @if($use-step-variation-attached) {
    /*--------------
        Attached
    ---------------*/

    /* Top */
    .ui.attached.steps {
      width: $step-attached-width !important;
      margin: 0 $step-attached-horizontal-offset $step-attached-vertical-offset;
      max-width: $step-attached-width;
      border-radius: $step-steps-border-radius $step-steps-border-radius 0 0;
    }
    .ui.attached.steps .step:first-child {
      border-radius: $step-steps-border-radius 0 0 0;
    }
    .ui.attached.steps .step:last-child {
      border-radius: 0 $step-steps-border-radius 0 0;
    }

    /* Bottom */
    .ui.bottom.attached.steps {
      margin: $step-attached-vertical-offset $step-attached-horizontal-offset 0;
      border-radius: 0 0 $step-steps-border-radius $step-steps-border-radius;
    }
    .ui.bottom.attached.steps .step:first-child {
      border-radius: 0 0 0 $step-steps-border-radius;
    }
    .ui.bottom.attached.steps .step:last-child {
      border-radius: 0 0 $step-steps-border-radius 0;
    }
  }

  /*-------------------
      Evenly Divided
  --------------------*/

  .ui.one.steps,
  .ui.two.steps,
  .ui.three.steps,
  .ui.four.steps,
  .ui.five.steps,
  .ui.six.steps,
  .ui.seven.steps,
  .ui.eight.steps {
    width: 100%;
  }
  .ui.one.steps > .step,
  .ui.two.steps > .step,
  .ui.three.steps > .step,
  .ui.four.steps > .step,
  .ui.five.steps > .step,
  .ui.six.steps > .step,
  .ui.seven.steps > .step,
  .ui.eight.steps > .step {
    flex-wrap: nowrap;
  }
  .ui.one.steps > .step {
    width: 100%;
  }
  .ui.two.steps > .step {
    width: 50%;
  }
  .ui.three.steps > .step {
    width: 33.333%;
  }
  .ui.four.steps > .step {
    width: 25%;
  }
  .ui.five.steps > .step {
    width: 20%;
  }
  .ui.six.steps > .step {
    width: 16.666%;
  }
  .ui.seven.steps > .step {
    width: 14.285%;
  }
  .ui.eight.steps > .step {
    width: 12.500%;
  }

  /*-------------------
        Sizes
  --------------------*/


  .ui.mini.steps .step,
  .ui.mini.step {
    font-size: $mini;
  }
  .ui.tiny.steps .step,
  .ui.tiny.step {
    font-size: $tiny;
  }
  .ui.small.steps .step,
  .ui.small.step {
    font-size: $small;
  }
  .ui.steps .step,
  .ui.step {
    font-size: $medium;
  }
  .ui.large.steps .step,
  .ui.large.step {
    font-size: $large;
  }
  .ui.big.steps .step,
  .ui.big.step {
    font-size: $big;
  }
  .ui.huge.steps .step,
  .ui.huge.step {
    font-size: $huge;
  }
  .ui.massive.steps .step,
  .ui.massive.step {
    font-size: $massive;
  }


  @if($use-step-variation-inverted) {
    /*--------------
        Inverted
    ---------------*/

    .ui.inverted.steps {
      border: 1px solid $solid-white-border-color;
    }

    .ui.inverted.steps .step {
      color: $inverted-text-color;
      background: $black;
      border-color: $solid-white-border-color;
    }

    .ui.inverted.steps .step:after {
      background-color: $black;
      border-color: $solid-white-border-color;
    }

    .ui.inverted.steps .step .description {
      color: $inverted-text-color;
    }

    /* Active */
    .ui.inverted.steps .step.active,
    .ui.inverted.steps .step.active:after {
      background: $step-inverted-active-background;
    }
    .ui.inverted.ordered.steps .step.active:before,
    .ui.inverted.steps .active.step .icon {
      color: $inverted-selected-text-color;
    }

    /* Disabled */
    .ui.inverted.steps .disabled.step,
    .ui.inverted.steps .disabled.step:after {
      background: $step-inverted-disabled-background;
    }
    .ui.inverted.steps .disabled.step,
    .ui.inverted.steps .disabled.step .title,
    .ui.inverted.steps .disabled.step .description {
      color: $inverted-disabled-text-color;
    }

    /* Link Hover */
    .ui.inverted.steps .link.step:hover::after,
    .ui.inverted.steps .link.step:hover,
    .ui.inverted.steps a.step:hover::after,
    .ui.inverted.steps a.step:hover {
      background: $step-inverted-hover-background;
      color: $inverted-hovered-text-color;
    }

    /* Link Down */
    .ui.inverted.steps .link.step:active::after,
    .ui.inverted.steps .link.step:active,
    .ui.inverted.steps a.step:active::after,
    .ui.inverted.steps a.step:active {
      background: $step-inverted-active-hover-background;
      color: $inverted-pressed-text-color;
    }
  }
}

@import '../../themes/default/elements/step.style';