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

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

$nav-line-text-color           : #428bca;
$nav-line-bg-color             : #f5f5f5;

$nav-active-primary-color      : #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    : #f9f9f9;
$nav-disabled-secondary-color  : #eeeeee;

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


.sw-theme-dots {

  // 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 {
    position: relative;
    margin-bottom: 10px;

    &::before {
      content: " ";
      position: absolute;
      top: 18px;
      left: 0;
      width: 100%;
      height: 5px;
      background-color: $container-border-color;
      border-radius: 3px;
      z-index: 1;
    }

    .nav-link {
      position: relative;
      margin-top: 40px;

      &::before {
        content: " ";
        position: absolute;
        display: block;
        top: -36px;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: none;
        background: $nav-line-bg-color;
        color: $nav-line-text-color;
        text-decoration: none;
        z-index: 98;
      }

      &::after {
        content: " ";
        position: absolute;
        display: block;
        top: -28px;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        z-index: 99;
      }

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

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

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

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

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

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

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

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

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

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

    }
  }

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

    & > .nav {
      &::before {
        background-color: darken($container-border-color, 70%);
      }

      .nav-link {
        &::before {
          background: darken($nav-line-bg-color, 70%);
          color: darken($nav-line-text-color, 70%);
        }
      }
    }

  }

}