// Color Settings
$container-border-color        : #eeeeee;

$toolbar-text-color           : #ffffff;
$toolbar-bg-color             : #f9f9f9;
$toolbar-btn-bg-color         : #17a2b8;

$nav-active-primary-color      : #ffffff; // #17a2b8 #5bc0de
$nav-active-secondary-color    : #5cb85c;

$nav-inactive-primary-color    : #f8f8f8;
$nav-inactive-secondary-color  : #999999;

$nav-done-primary-color        : #ffffff;
$nav-done-secondary-color      : #5cb85c;

$nav-disabled-primary-color    : #dddddd;
$nav-disabled-secondary-color  : #f9f9f9;

$nav-danger-primary-color      : #ffffff;
$nav-danger-secondary-color    : #d9534f;


.sw-theme-progress {
  border: 1px solid $container-border-color;

  // Content style
  & > .tab-content {

    & > .tab-pane {
      padding: 10px;
    }

  }

  // Toolbar style
  & .toolbar {

    & > .btn {
      color: $toolbar-text-color;
      background-color: $toolbar-btn-bg-color;
      border: 1px solid $toolbar-btn-bg-color;
      padding: .375rem .75rem;
      border-radius: .25rem;
      font-weight: 400;
    }
  }

  // Navigation style
  & > .nav {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.1)!important;

    .nav-link {
      position: relative;
      height: 100%;
      min-height: 100%;
      background: transparent;
      overflow: hidden;
      z-index: 2;

      &::after {
        content: "";
        position: absolute;
        height: 150%;
        width: 0;
        left: 0;
        top: 0;
        background: $nav-active-primary-color;
        z-index: -1;
        transition: all .35s ease .10s;
      }

      &.inactive {
        color: $nav-inactive-secondary-color;
        cursor: not-allowed;
      }

      &.active {
        color: $nav-active-primary-color !important;
        cursor: pointer;

        &::after {
          background-color: $nav-active-secondary-color;
          width: 100%;
        }
      }

      &.done {
        color: $nav-done-primary-color !important;
        cursor: pointer;

        &::after {
          background: $nav-done-secondary-color;
          width: 100%;
        }
      }

      &.disabled {
        color: $nav-disabled-primary-color !important;
        cursor: not-allowed;

        &::after {
          background: $nav-disabled-secondary-color;
          width: 100%;
        }
      }

      &.danger {
        color: $nav-danger-primary-color !important;
        cursor: pointer;

        &::after {
          background: $nav-danger-secondary-color;
          width: 100%;
        }
      }
    }

  }

  // Dark mode style
  &.sw-dark {
    color: rgba(255, 255, 255, 0.95);

    & > .nav {
      .nav-link {

        &.active {
          color: lighten($nav-active-primary-color, 10%);

          &::after {
            background-color: #333;
          }
        }

        &.done {
          color: $nav-done-primary-color !important;

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

        &.disabled {
          color: darken($nav-disabled-primary-color, 70%) !important;

          &::after {
            background: darken($nav-disabled-secondary-color, 70%);
          }
        }

        &.danger {
          color: $nav-danger-primary-color !important;

          &::after {
            background: $nav-danger-secondary-color;
          }
        }

      }
    }
  }

}