// Overrides
@if $bulmaswatch-import-font {
  @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic&display=swap");
}

.box {
  border-style: solid;
  border-width: 1px 1px $thickness 1px;
  border-color: $border;
}

.button {
  height: 2.648em;
}

.button {
  transition: all 300ms ease;
  border-style: solid;
  border-width: 1px 1px $thickness 1px;
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: bold;

  &.is-hovered,
  &:hover {
    border-bottom-width: $thickness - 1;
  }

  &.is-active,
  &.is-focused,
  &:active,
  &:focus {
    box-shadow: none;
  }
  @each $name, $pair in $colors {
    $color: nth($pair, 1);
    $color-invert: nth($pair, 2);

    &.is-#{$name} {
      border-color: darken($color, 5);

      &.is-hovered,
      &:hover {
        border-color: darken($color, 10) !important;
      }

      &.is-active,
      &.is-focused,
      &:active,
      &:focus {
        border-color: darken($color, 10);
        box-shadow: $input-focus-box-shadow-size rgba($color, 0.25);
      }
    }
  }
}

.input,
.textarea {
  box-shadow: inset 0 0.125em 0 rgba($black, 0.075);

  &.is-active,
  &.is-focused,
  &:active,
  &:focus {
    box-shadow: inset 0 0.125em 0 rgba($black, 0.075),
      $input-focus-box-shadow-size $input-focus-box-shadow-color;
  }

  @each $name, $pair in $colors {
    $color: nth($pair, 1);
    $color-invert: nth($pair, 2);

    &.is-#{$name} {
      &.is-active,
      &.is-focused,
      &:active,
      &:focus {
        border-color: darken($color, 10);
        box-shadow: inset 0 0.125em 0 rgba($black, 0.075),
          $input-focus-box-shadow-size rgba($color, 0.25);
      }
    }
  }
}

.select:after {
  margin-top: -0.575em;
}

.select select {
  border-width: 1px 1px $thickness 1px;
  &:not([multiple]) {
    height: calc(2.25em + #{$thickness});
  }
}

.field.has-addons {
  .control .select select {
    height: 2.25em;
  }
}

.file {
  .file-cta,
  .file-name {
    border-width: 1px 1px $thickness 1px;
    position: unset;
  }
  &.has-name .file-name {
    border-left-width: 0;
  }
  &.is-boxed.has-name .file-name {
    border-width: 1px 1px $thickness 1px;
  }
  @each $name, $pair in $colors {
    $color: nth($pair, 1);
    $color-invert: nth($pair, 2);

    &.is-#{$name} {
      .file-cta {
        border-color: darken($color, 5);
      }
      &.is-hovered,
      &:hover {
        .file-cta {
          border-color: darken($color, 10);
        }
      }
    }
  }
}

.notification {
  border-style: solid;
  border-width: 1px 1px $thickness 1px;
  border-color: $border;
  @each $name, $pair in $colors {
    $color: nth($pair, 1);

    &.is-#{$name} {
      border-color: darken($color, 5);
    }
  }
}

.progress {
  border-radius: $radius-large;
}

.card {
  box-shadow: none;
  border-style: solid;
  border-width: 1px 1px $thickness 1px;
  border-color: $border;
  background-color: rgba($grey-lighter, 0.075);
  border-radius: $radius;

  .card-image {
    img {
      border-radius: $radius $radius 0 0;
    }
  }

  .card-header {
    box-shadow: none;
    border-bottom: 1px solid $grey-lighter;
    border-radius: $radius $radius 0 0;
  }
}

.message {
  .message-body {
    border-style: solid;
    border-width: 1px 1px $thickness 1px;
  }
}

.hero {
  .navbar {
    border: none;
    box-shadow: 0 $thickness 0 $border;
  }
  @each $name, $pair in $colors {
    $color: nth($pair, 1);
    $color-invert: nth($pair, 2);

    &.is-#{$name} {
      .navbar {
        box-shadow: 0 $thickness 0 darken($color, 5);
      }
    }
  }
  @include touch {
    .navbar-menu {
      box-shadow: none;
    }
  }
}

.navbar {
  border: solid $border;
  border-width: 1px 1px $thickness 1px;
  @each $name, $pair in $colors {
    $color: nth($pair, 1);
    $color-invert: nth($pair, 2);

    &.is-#{$name} {
      border-color: darken($color, 5);
    }
  }
  .navbar-dropdown {
    box-shadow: $navbar-dropdown-boxed-shadow;
    top: 101%;
  }
}

.pagination-link,
.pagination-next,
.pagination-previous {
  border-width: 1px 1px $thickness 1px;
}

.tabs {
  &.is-boxed li.is-active a {
    border-top-width: $thickness;
  }

  &.tabs.is-toggle li.is-active a {
    box-shadow: inset 0 -#{$thickness} 0 darken($link, 10);
    border-color: darken($link, 10);
  }
}