// Spacelab 4.5.0
// Bootswatch


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

$web-font-path: "https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700&display=swap" !default;
@import url($web-font-path);

@mixin btn-shadow($color){
  @include gradient-y-three-colors(lighten($color, 15%), $color, 50%, darken($color, 4%));
  filter: none;
  border: 1px solid darken($color, 10%);
}

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

.navbar {

  .nav-link,
  .navbar-brand {
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1);
    transition: color ease-in-out .2s;
  }

  &.bg-primary {
    @include btn-shadow(map-get($theme-colors, "primary"));
  }

  &.bg-dark {
    @include btn-shadow(map-get($theme-colors, "secondary"));
  }

  &.bg-light {
    @include btn-shadow(map-get($theme-colors, "light"));

    .nav-link,
    .navbar-brand {
      text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1);
    }

    .navbar-brand {
      color: $navbar-light-color;

      &:hover {
        color: $info;
      }
    }
  }
}

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

.btn {
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1);

  &-link {
    text-shadow: none;
  }
}

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include btn-shadow($value);
  }

  .btn-#{$color}:not(.disabled):hover {
    @include btn-shadow(darken($value, 4%));
  }
}

[class*="btn-outline-"] {
  text-shadow: none;
}

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

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

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

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

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

.badge {

  &-secondary {
    color: $white;
  }
}

// Progress bars ===============================================================

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

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