// Overrides
@mixin btn-gradient($color) {
  background-image: linear-gradient(
    180deg,
    lighten($color, 8%) 0%,
    $color 60%,
    darken($color, 4%) 100%
  );
}

.button {
  @each $name, $pair in $colors {
    $color: nth($pair, 1);
    $color-invert: nth($pair, 2);
    &.is-#{$name} {
      &:not(.is-outlined):not(.is-inverted) {
        @include btn-gradient($color);
      }
    }
  }
}

.button,
.control.has-icons-left .icon,
.control.has-icons-right .icon,
.input,
.pagination-ellipsis,
.pagination-link,
.pagination-next,
.pagination-previous,
.select,
.select select,
.textarea {
  height: 2.375em;
}

.select,
.select select {
  height: auto !important;
}

.input,
.textarea {
  box-shadow: none;
}

.card {
  box-shadow: 0 0 0 1px $border;
  background-color: $white-bis;
  .card-header {
    box-shadow: none;
    border-bottom: 1px solid $border;
  }
}

.notification {
  @each $name, $pair in $colors {
    $color: nth($pair, 1);
    $color-invert: nth($pair, 2);
    $color-lightning: max((100% - lightness($color)) - 2%, 0%);
    &.is-#{$name} {
      background-color: lighten($color, $color-lightning);
      color: $color;
      border: 1px solid lighten($color, 30);
    }
  }
}

.navbar:not(.is-transparent) {
  @include btn-gradient($primary);
  .navbar-item,
  .navbar-link {
    color: $white;
    &.has-dropdown:hover .navbar-link,
    &:hover {
      background-color: rgba(#000, 0.05);
    }
    &.is-active,
    &:active {
      background-color: rgba(#000, 0.1);
    }
  }
  .navbar-burger:hover {
    background-color: rgba(#000, 0.05);
  }
  .navbar-link::after {
    border-color: $white;
  }
  @include mobile {
    .navbar-menu {
      background-color: $primary;
      @include btn-gradient($primary);
    }
  }
  @include desktop {
    .navbar-dropdown .navbar-item {
      color: $grey-dark;
    }
  }
  .navbar-burger {
    span {
      background-color: $white;
    }
  }
  @each $name, $pair in $colors {
    $color: nth($pair, 1);
    $color-invert: nth($pair, 2);
    &.is-#{$name} {
      @include btn-gradient($color);
      @include mobile {
        .navbar-menu {
          background-color: $color;
          @include btn-gradient($color);
        }
        .navbar-item,
        .navbar-link {
          color: $color-invert;
          &.is-active,
          &:hover {
            background-color: darken($color, 2);
            color: $color-invert;
          }
          &:after {
            border-color: $color-invert;
          }
        }
      }
      .navbar-burger {
        span {
          background-color: $color-invert;
        }
      }
    }
  }
}

.hero {
  .navbar:not(.is-transparent) {
    @include btn-gradient($primary);
  }
  @each $name, $pair in $colors {
    $color: nth($pair, 1);
    $color-invert: nth($pair, 2);
    &.is-#{$name} {
      .navbar {
        @include btn-gradient($color);
      }
      .navbar-item,
      .navbar-link {
        color: $color-invert;
        &.is-active,
        &:hover {
          background-color: darken($color, 2);
          color: $color-invert;
        }
        &:after {
          border-color: $color-invert;
        }
      }
      .navbar-burger {
        span {
          background-color: $color-invert;
        }
      }
      @include touch {
        .navbar-menu {
          background-color: $color;
          @include btn-gradient($color);
        }
      }
      @include desktop {
        .navbar-dropdown a.navbar-item:hover {
          color: $color-invert;
        }
      }
    }
  }
}