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

$toolbar-bg-color              : rgba(0,0,0,.03);
$toolbar-btn-bg-color          : #17a2b8;

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

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

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

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

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


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

  // Content style
  & > .tab-content {

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

  }

  // Toolbar style
  & .toolbar {

    & > .btn {
      color: #fff;
      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%;

      &::after {
        content: "";
        position: absolute;
        height: 2px;
        width: 0;
        left: 0px;
        bottom: -1px;
        background: $nav-inactive-secondary-color;
        transition: all .35s ease .15s;
      }

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

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

        &::after {
          background: $nav-active-primary-color !important;
          width: 100%;
        }
      }

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

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

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

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

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

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

  }

}