// Lux 4.6.2
// Bootswatch

//
// Color system
//

$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #f7f7f9 !default;
$gray-300: #eceeef !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #919aa1 !default;
$gray-700: #55595c !default;
$gray-800: #343a40 !default;
$gray-900: #1a1a1a !default;
$black:    #000 !default;

$blue:    #007bff !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #e83e8c !default;
$red:     #d9534f !default;
$orange:  #fd7e14 !default;
$yellow:  #f0ad4e !default;
$green:   #4bbf73 !default;
$teal:    #20c997 !default;
$cyan:    #1f9bcf !default;

$primary:       $gray-900 !default;
$secondary:     $white !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $white !default;
$dark:          $gray-800 !default;

$yiq-contrasted-threshold:  185 !default;

// Options

$enable-rounded:            false !default;

// Body

$body-color:                $gray-700 !default;

// Fonts

// stylelint-disable-next-line value-keyword-case
$font-family-sans-serif:      "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
$font-size-base:              .875rem !default;
$h1-font-size:                2rem !default;
$h2-font-size:                1.75rem !default;
$h3-font-size:                1.5rem !default;
$h4-font-size:                1.25rem !default;
$h5-font-size:                1rem !default;
$h6-font-size:                .75rem !default;
$headings-font-weight:        600 !default;
$headings-color:              $gray-900 !default;

// Tables

$table-border-color:          rgba(0, 0, 0, .05) !default;

// Buttons

$btn-line-height:             1.5rem !default;
$input-btn-padding-y:         .75rem !default;
$input-btn-padding-x:         1.5rem !default;
$input-btn-padding-y-sm:      .5rem !default;
$input-btn-padding-x-sm:      1rem !default;
$input-btn-padding-y-lg:      2rem !default;
$input-btn-padding-x-lg:      2rem !default;
$btn-font-weight:             600 !default;

// Forms

$input-line-height:                     1.5 !default;
$input-bg:                              $gray-200 !default;
$input-disabled-bg:                     $gray-300 !default;
$input-group-addon-bg:                  $gray-300 !default;

// Navbar

$navbar-padding-y:                  1.5rem !default;
$navbar-dark-hover-color:           $white !default;
$navbar-light-color:                rgba($black, .3) !default;
$navbar-light-hover-color:          $gray-900 !default;
$navbar-light-active-color:         $gray-900 !default;

// Pagination

$pagination-border-color:           transparent !default;
$pagination-hover-border-color:     $pagination-border-color !default;
$pagination-disabled-border-color:  $pagination-border-color !default;

// Breadcrumbs

$breadcrumb-bg:                     transparent !default;

// Import bootstrap
@import "bootstrap/bootstrap";

// Lux 4.6.2
// Bootswatch

// Variables ===================================================================

$web-font-path: "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&display=swap" !default;
@if $web-font-path {
  @import url($web-font-path);
}

// Navbar ======================================================================

.navbar {
  font-size: $font-size-sm;
  text-transform: uppercase;
  font-weight: 600;

  &-nav {
    .nav-link {
      padding-top: .715rem;
      padding-bottom: .715rem;
    }
  }

  &-brand {
    margin-right: 2rem;
  }
}

.bg-primary {
  background-color: theme-color("primary") !important;
}

.bg-light {
  border: 1px solid rgba(0, 0, 0, .1);

  &.navbar-fixed-top {
    border-width: 0 0 1px;
  }

  &.navbar-bottom-top {
    border-width: 1px 0 0;
  }
}

.nav-item {
  margin-right: 2rem;
}

// Buttons =====================================================================

.btn {
  font-size: $font-size-sm;
  text-transform: uppercase;

  &-sm {
    font-size: 10px;
  }

  &-warning {
    &,
    &:hover,
    &:not([disabled]):not(.disabled):active,
    &:focus {
      color: $white;
    }
  }
}

.btn-outline-secondary {
  border-color: $gray-600;
  color: $gray-600;

  &:not([disabled]):not(.disabled):hover,
  &:not([disabled]):not(.disabled):focus,
  &:not([disabled]):not(.disabled):active {
    background-color: $gray-400;
    border-color: $gray-400;
    color: $white;
  }

  &:not([disabled]):not(.disabled):focus {
    box-shadow: 0 0 0 .2rem rgba($gray-400, .5);
  }
}

[class*="btn-outline-"] {
  border-width: 2px;
}

.border-secondary {
  border: 1px solid $gray-400 !important;
}

// Typography ==================================================================

body {
  font-weight: 200;
  letter-spacing: 1px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-transform: uppercase;
  letter-spacing: 3px;
}

.text-secondary {
  color: $body-color !important;
}

// Tables ======================================================================

th {
  font-size: $font-size-sm;
  text-transform: uppercase;
}

.table {
  th,
  td {
    padding: 1.5rem;
  }

  &-sm {
    th,
    td {
      padding: .75rem;
    }
  }
}

// Forms =======================================================================

.custom-switch {
  .custom-control-label {
    &::after {
      top: add(.15625rem, 2px);
      left: add(-2.25rem, 2px);
      width: subtract(1rem, 4px);
      height: subtract(1rem, 4px);
    }
  }
}

// Navs ========================================================================

.dropdown-menu {
  font-size: $font-size-sm;
  text-transform: none;
}

// Indicators ==================================================================

.badge {
  padding-top: .28rem;

  &-pill {
    border-radius: 10rem;
  }
}

// Containers ==================================================================

.list-group-item {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6 {
    color: inherit;
  }
}

.card {
  &-title,
  &-header {
    color: inherit;
  }
}

.btn-outline-secondary {
  border-color: $gray-600 !important;
  color: $gray-600 !important;
}

.card.bg-primary {
  color: $white;
}

.card.bg-secondary {
  color: $black;
}