@import "../../constants/_variables.scss";

.nav-link {
  display: block;
  padding: 2px;

  // Disabled state lightens text
  &.disabled {
    color: $primary;
  }
}

//
// Tabs
//

.nav-tabs {
  border-bottom: 1px solid $primary !important;
  .nav-item {
    margin-bottom: 1px;
  }

  .nav-link {
    border: 1px solid transparent;
    color: $primary;
    padding: 1rem;

    &.focus {
      border-color: $primary;
    }

    &.disabled {
      color: $primary;
    }
  }
  .nav-link.active {
    background-color: #f4eeff !important;
    border-color: $primary !important;
    border-bottom: 0px !important;
  }
  .nav-link.active,
  .nav-item.show .nav-link {
    background-color: $primary;
  }
}

//
// Pills
//

.nav-pills {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  .nav-link {
    background: $white;
    box-shadow: shadow-2dp(gray);
    margin: 0 0.5rem;
    color: gray;
  }

  .nav-link.active {
    background-color: $primary !important;
  }

  .nav-link.active,
  .show > .nav-link {
    color: gray;
    box-shadow: none;
  }
}

// Tabbable tabs
//
// Hide tabbable panes to start, show them when `.active`

.tab-content {
  padding: 1rem;
  [class^="nav-tabs-"] &,
  [class*=" nav-tabs-"] & {
    border-top: 0 !important;
    border-right: 1px solid;
    border-bottom: 1px solid;
    border-left: 1px solid;
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
  }

  [class^="nav-pills-"] &,
  [class*=" nav-pills-"] & {
    border-radius: 1px;
    box-shadow: shadow-2dp(gray);
  }
}
