// Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved.
// This software is released under MIT license.
// The full license information can be found in LICENSE in the root directory of this project.

// NOTE THAT THE MIN-WIDTH OF THE BUTTONS WILL PUSH OUT THE DIALOG IF
// SET UP IMPROPERLY. THIS IS A KNOWN ISSUE AND USERS SHOULD USE THEIR
// BEST JUDGMENT WITH BUTTONS IN THE WIZARD. NO MORE THAN THREE...
// IT'S AN ISSUE WITH THE NUMBER OF BUTTONS, NOT THE LENGTH OF THE TEXT
// INSIDE THE BUTTONS

@include exports('wizard.clarity') {
  .clr-wizard {
    .modal-dialog {
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: $clr-wizard-box-shadow;
      height: 50%;
      max-height: 100%;
    }

    .modal-content {
      border-radius: 0 $clr-wizard-border-radius $clr-wizard-border-radius 0;
      box-shadow: none;
      padding: 0;
      flex: 2 2 auto;
      width: 66%;
      height: initial;
      overflow: hidden;
      display: flex;
      align-items: flex-start;
      flex-direction: column;
    }

    .modal-header {
      flex: 0 0 auto;
      width: 100%;
      // right padding nudged a bit to better align icons
      padding: $clr-wizard-default-space ($clr-wizard-default-space - 0.208333rem) 0.25rem $clr-wizard-default-space;
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
      align-items: flex-start;
    }

    .modal-title {
      color: $clr-wizard-title-text;
      display: flex;
      flex-direction: row;
      width: 100%;
      // align focus style across modal title
      line-height: 1.13rem;
      margin-top: -0.13rem;
    }

    .modal-body {
      flex: 1 1 auto;
      color: $clr-wizard-main-textColor;
      width: 100%;
    }

    .modal-footer {
      padding: 0;
      display: block;
      padding-top: $clr-wizard-default-space;
      height: $clr-wizard-footer-height;
      min-height: $clr-wizard-footer-height;
      max-height: $clr-wizard-footer-height;
      width: 100%;
      flex: 0 0 $clr-wizard-footer-height;
    }

    .clr-wizard-btn {
      margin: 0;
      max-width: 100%;
      display: block;
    }

    .modal-title-text {
      display: inline-block;
      flex: 0 1 auto;
      width: 100%;
      outline: none;
    }

    .modal-header-actions-wrapper {
      flex: 1 0 auto;
      padding-left: 0.5rem;
      padding-right: 0.166667rem;
    }

    .clr-wizard-header-action {
      width: $clr-wizard-default-space;
      height: $clr-wizard-default-space;
      padding: 0;
      margin: 0;
      min-width: $clr-wizard-default-space;
      line-height: $clr-wizard-default-space;
      font-size: $clr-wizard-default-space + 0.083333rem;
      color: $clr-wizard-header-action-color;
      transition: color linear 0.2s;

      & a {
        color: $clr-wizard-header-action-color;
      }

      &:hover,
      &:active,
      &:focus {
        color: $clr-wizard-header-action-color--hovered;
      }

      clr-icon {
        $clr-wizard-header-action-icon-dim: ($clr-wizard-default-space - 0.083333rem);
        height: $clr-wizard-header-action-icon-dim;
        width: $clr-wizard-header-action-icon-dim;
      }
    }

    .clr-wizard-stepnav-wrapper {
      flex: 1 1 auto;
      width: 34%;
      max-width: 34%;
      display: flex;
      flex-direction: column;
      order: -1;
      overflow: hidden;
      overflow-y: auto;
      padding-bottom: $clr-wizard-default-space;
      line-height: $clr-wizard-default-space;
      border-right: $clr-default-borderwidth solid $clr-wizard-step-nav-border-color;
      height: 100%;
      background-color: $clr-wizard-sidenav-bgcolor;
      border-radius: $clr-wizard-border-radius 0 0 $clr-wizard-border-radius;
    }

    .clr-wizard-stepnav {
      padding-left: $clr-wizard-default-space;
      display: block;
      font-size: 0.583333rem;
      color: $clr-wizard-sidenav-text;
      width: 100%;
      flex: 1 1 auto;
    }

    .clr-wizard-stepnav-list {
      display: block;
      box-shadow: none;
      counter-reset: a;
      white-space: nowrap;
      height: auto;
      list-style-type: none;
      margin: 0;
      width: 100%;
    }

    .clr-wizard-stepnav-item {
      display: block;
      box-shadow: $clr-wizard-stepnav-border-size 0 0 $clr-wizard-stepnav-border-color inset;
      margin: 0 0 (-1 * $clr-default-borderwidth) 0;
      padding: 0.25rem 0;
      padding-left: 0.333333rem;
      color: $clr-wizard-sidenav-text;
      font-weight: 400;

      &.active {
        color: $clr-wizard-sidenav-text--active;
        font-weight: 500;

        .clr-wizard-stepnav-link {
          background-color: $clr-wizard-stepnav-active-bgcolor;
          border-radius: $clr-wizard-stepnav-active-border-radius 0 0 $clr-wizard-stepnav-active-border-radius;
        }
      }

      &.complete {
        box-shadow: $clr-wizard-stepnav-border-size 0 0 $clr-wizard-stepnav-border-color--active inset;
        transition: box-shadow 0.2s ease-in;
      }

      &.no-click button {
        pointer-events: none;
      }
    }

    .clr-wizard-stepnav-link {
      width: 100%;
      display: inline-block;
      color: inherit;
      line-height: 0.666667rem;
      padding: 0.416667rem;
      padding-right: 0.125rem;
      font-size: 0.583333rem;
      font-weight: inherit;
      letter-spacing: normal;
      text-align: left;
      text-transform: none;
      margin: 0;

      &::before {
        content: counter(a);
        counter-increment: a;
        padding-right: 0.25rem + $clr-rem-1px;
        min-width: 0.625rem;
      }
    }

    .clr-wizard-title {
      color: $clr-wizard-title-text;
      margin-top: 0;
      padding-top: $clr-wizard-default-space;
      padding-left: $clr-wizard-default-space;
      padding-right: $clr-wizard-default-space * 0.5;
      padding-bottom: $clr-wizard-default-space;
      flex: 0 0 auto;
    }

    // normal modal ignores this. wizard needs it so the nav and content
    // will take up the full height of the modal...
    .modal-content-wrapper {
      display: flex;
      flex-direction: row;
      flex: 1 1 100%;
      width: 100%;
      height: 100%;
      // firefox fix
      max-height: 100%;

      // edge fix, related to the firefox fix above
      .modal-nav {
        height: auto;
      }
    }

    .clr-wizard-footer-buttons {
      text-align: right;
      padding-right: $clr-wizard-default-space;
      margin: 0;
    }

    .clr-wizard-footer-buttons-wrapper {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-end;
    }

    .clr-wizard-btn-wrapper {
      flex: 0 1 auto;
      min-width: 3.5rem;
      padding-left: 0.5rem;
    }

    .clr-wizard-btn-wrapper[aria-hidden='true'] {
      display: none;
    }

    .clr-wizard-btn.btn-link {
      // extra padding around flat buttons in wizard is not necessary
      padding: 0;
    }

    .clr-wizard-content {
      display: block;
    }

    .clr-wizard-page:not([aria-hidden='true']) {
      padding: $clr-wizard-default-space;
      padding-top: 0.75rem;
      display: block;
    }
  }

  .clr-wizard {
    // sizing stuff is here
    .modal-dialog {
      height: 75vh;
    }

    .modal-body {
      // overriding forced style on .modal
      max-height: 100%;
    }

    &.wizard-md {
      .modal-dialog {
        min-height: $clr-wizard-all-dialog-min-height;
        max-height: $clr-wizard-md-dialog-max-height;
      }

      .modal-content,
      .clr-wizard-stepnav-wrapper {
        max-height: $clr-wizard-md-dialog-max-height;
      }

      .clr-wizard-stepnav-wrapper {
        min-width: $clr-wizard-md-nav-min-width;
        max-width: $clr-wizard-md-nav-max-width;
      }
    }

    &.wizard-lg {
      .modal-dialog {
        min-height: $clr-wizard-all-dialog-min-height;
        max-height: $clr-wizard-lg-dialog-max-height;
      }

      .modal-content,
      .clr-wizard-stepnav-wrapper {
        max-height: $clr-wizard-lg-dialog-max-height;
      }

      .nav-panel,
      .clr-wizard-stepnav-wrapper {
        min-width: $clr-wizard-lg-nav-min-width;
        max-width: $clr-wizard-lg-nav-max-width;
      }
    }

    &.wizard-xl {
      .modal-dialog {
        height: $clr-wizard-xl-dialog-max-height;
        max-height: none;
      }

      .nav-panel,
      .clr-wizard-stepnav-wrapper {
        min-width: $clr-wizard-xl-nav-min-width;
        max-width: $clr-wizard-xl-nav-max-width;
      }
    }

    .spinner:not(.spinner-inline):not(.clr-treenode-spinner) {
      left: calc(50% + 4.791667rem);
      position: absolute;
      top: 40%;
    }
  }

  .clr-wizard-page {
    & > *:first-child {
      margin-top: 0;

      & > *:first-child {
        margin-top: 0;
      }
    }

    & > form:first-child {
      padding-top: 0;

      & > .form-block:first-child {
        margin-top: 0;
      }
    }
  }

  /** @deprecated since 3.0, inline wizard style should be removed in 4.0 */
  .clr-wizard--inline {
    display: block;
    width: 100%;
    // you will want to set a fixed width and height for these static wizards
    // otherwise, you'll get some minor jumping along the right edge when it is
    // closed...

    & > clr-modal > .modal:focus {
      // need to remove the outline style or trap-focus directive will make
      // outline appear in Safari and Microsoft browsers
      outline-style: none;
      outline-color: transparent;
    }

    clr-modal {
      height: 100%;
      width: 100%;
      display: block;
    }

    .modal {
      padding: 0;
      position: static;
      height: 100%;
      max-height: 100%;

      .content-container {
        height: 100%;

        .nav-panel {
          width: 99%;
          height: 99%;
        }
      }

      .modal-content {
        box-shadow: none;
      }

      .modal-dialog {
        min-height: 100%;
        height: 100%;
        width: 100%;
        z-index: auto;
      }
    }

    .modal-body {
      height: 100%;
    }

    .modal-header .close {
      display: none;
    }

    .nav.navList {
      padding-top: 0;
    }

    .modal-dialog .modal-content .modal-body .content-area {
      overflow-y: auto;
    }

    .modal-backdrop {
      height: 0;
      width: 0;
      display: none;
    }

    .modal-content-wrapper {
      align-items: stretch;
      height: 100%;
    }

    .clr-wizard-stepnav-wrapper,
    &.clr-wizard .modal-content {
      min-height: 100%;
      height: auto;
      max-height: 100%;

      .clr-wizard-stepnav {
        height: 100%;
      }
    }
  }

  .clr-wizard--no-shadow {
    .modal-content-wrapper,
    .modal-dialog {
      box-shadow: none;
    }
  }

  .clr-wizard--no-title {
    .clr-wizard-title {
      display: none;
    }

    .clr-wizard-stepnav {
      padding-top: 1rem;
    }
  }

  @media screen {
    .clr-wizard-page[aria-hidden='true'] {
      display: none;
    }
  }
}

@include fixForMsEdge {
  // Edge is pushing header actions down. This aligns them with the close btn.
  .clr-wizard .clr-wizard-header-action {
    margin-top: -0.125rem;
  }
}