@import './common';

/* Adapted from Dipu Raj's SmartWizard 4 dots theme */

nav.ng-wizard-navigation {
  border: none;

  ul.ng-wizard-navigation-list {
    position: relative;
    background: #fff;
    border: 0px solid #ccc !important;
    list-style: none;

    &:before {
      content: " ";
      position: absolute;
      top: 47px;
      bottom: 0;
      width: 100%;
      height: 5px;
      background-color: #f5f5f5;
      border-radius: 3px;
      z-order: 0;
      z-index: 95;
    }

    li.ng-wizard-navigation-list-item {
      border: none;
      padding: 5px 15px;

      div {
        position: relative;
        text-align: center;
        font-weight: bold;
        background: transparent;
        border: none;
        color: #ccc;
        text-decoration: none;
        outline-style: none;
        z-index: 96;
        display: block;

        &:before {
          content: ' ';
          position: absolute;
          bottom: -15px;
          left: calc(50% - 15px);
          margin-top: 10px;
          display: block;
          border-radius: 50%;
          color: #428bca;
          background: #f5f5f5;
          border: none;
          width: 30px;
          height: 30px;
          text-decoration: none;
          z-index: 98;
        }

        &:after {
          content: ' ';
          position: relative;
          left: calc(50% - 8px);
          bottom: -7.5px;
          margin-top: 10px;
          display: block;
          width: 16px;
          height: 16px;
          background: #f5f5f5;
          border-radius: 50%;
          z-index: 99;
        }

        i.ng-wizard-icon {
          display: none;
        }
      }

      div.ng-wizard-navigation-active {
        color: #5bc0de;

        &:after {
          background: #5bc0de;
        }
      }

      div.ng-wizard-navigation-link {
        color: #5cb85c;

        &:after {
          background: #5cb85c;
        }
      }

      div.ng-wizard-navigation-invalid {
        color: #d9534f;

        &:after {
          background: #d9534f;
        }
      }

      div.ng-wizard-navigation-disabled {
        color: #eee;

        &:after {
          background: #eee;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  ul.ng-wizard-navigation-list {
    &:before {
      top: 0;
      bottom: 0;
      left: 10px;
      width: 5px;
      height: 100%;
      background-color: #f5f5f5;
      display: block;
      margin-right: 10px;
    }

    li.ng-wizard-navigation-list-item {
      margin-left: 20px;
      display: block;
      clear: both;

      div {
        text-align: left;
        margin-left: 0;
        display: block;

        &:before {
          top: 5px;
          left: -23px;
          margin-right: 10px;
          display: block;
        }

        &:after {
          top: -38px;
          left: -31px;
          margin-right: 10px;
          display: block;
        }
      }
    }
  }
}