////////////////////////////////////////////////
// DARKLY
////////////////////////////////////////////////

// Overrides
  
  hr {
    height: $border-width;
  }
  
  h6 {
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .hero {
    background-color: $grey-dark;
  }
  
  a {
    transition: all 200ms ease;
  }
  
  .button {
    transition: all 200ms ease;
    border-width: $border-width;
    color: $white;
  
    &.is-active,
    &.is-focused,
    &:active,
    &:focus {
      box-shadow: 0 0 0 2px rgba($button-focus-border-color, 0.5);
    }
    @each $name, $pair in $colors {
      $color: nth($pair, 1);
      $color-invert: nth($pair, 2);
  
      &.is-#{$name} {
        &.is-hovered,
        &:hover {
          background-color: lighten($color, 7.5%);
        }
  
        &.is-active,
        &.is-focused,
        &:active,
        &:focus {
          border-color: $color;
          box-shadow: 0 0 0 2px rgba($color, 0.5);
        }
      }
    }
  }
  
  .label {
    color: $grey-lighter;
  }
  
  .input,
  .textarea {
    transition: all 200ms ease;
    box-shadow: none;
    border-width: $border-width;
    padding-left: 1em;
    padding-right: 1em;
    background-color: $body-background-color;
    color: $text
  }
  
  .select {
    &:after,
    select {
      border-width: $border-width;
      background-color: $body-background-color;
      color: $text
    }
  }
  
  .control {
    &.has-addons {
      .button,
      .input,
      .select {
        margin-right: -$border-width;
      }
    }
  }
  
  .notification {
    background-color: $grey-dark;
  }
  
  .card {
    $card-border-color: lighten($grey-darker, 5);
    box-shadow: none;
    border: $border-width solid $card-border-color;
    background-color: $grey-darker;
    border-radius: $radius;
  
    .card-image {
      img {
        border-radius: $radius $radius 0 0;
      }
    }
  
    .card-header {
      box-shadow: none;
      background-color: rgba($black-bis, 0.2);
      border-radius: $radius $radius 0 0;
    }
  
    .card-footer {
      background-color: rgba($black-bis, 0.2);
    }
  
    .card-footer,
    .card-footer-item {
      border-width: $border-width;
      border-color: $card-border-color;
    }
  }
  
  .notification {
    @each $name, $pair in $colors {
      $color: nth($pair, 1);
      $color-invert: nth($pair, 2);
  
      &.is-#{$name} {
        a:not(.button) {
          color: $color-invert;
          text-decoration: underline;
        }
      }
    }
  }
  
  .tag {
    border-radius: $radius;
  }
  
  .menu-list {
    a {
      transition: all 300ms ease;
    }
  }
  
  .modal-card-body {
    background-color: $grey-darker;
  }
  
  .modal-card-foot,
  .modal-card-head {
    border-color: $grey-dark;
  }
  
  .message-header {
    font-weight: $weight-bold;
    background-color: $grey-dark;
    color: $white;
  }
  
  .message-body {
    border-width: $border-width;
    border-color: $grey-dark;
  }
  
  .navbar {
    border-radius: $radius;
  
    &.is-transparent {
      background: none;
    }
  
    &.is-primary {
      .navbar-dropdown {
        a.navbar-item.is-active {
          background-color: $link;
        }
      }
    }
  
    @include until($navbar-breakpoint) {
      .navbar-menu {
        background-color: $navbar-background-color;
        border-radius: 0 0 $radius $radius;
      }
    }
  }
  
  .hero .navbar,
  body > .navbar {
    border-radius: 0;
  }
  
  .pagination-link,
  .pagination-next,
  .pagination-previous {
    border-width: $border-width;
  }
  
  .panel-block,
  .panel-heading,
  .panel-tabs {
    border-width: $border-width;
  
    &:first-child {
      border-top-width: $border-width;
    }
  }
  
  .panel-heading {
    font-weight: $weight-bold;
  }
  
  .panel-tabs {
    a {
      border-width: $border-width;
      margin-bottom: -$border-width;
  
      &.is-active {
        border-bottom-color: $link-active;
      }
    }
  }
  
  .panel-block {
    &:hover {
      color: $link-hover;
  
      .panel-icon {
        color: $link-hover;
      }
    }
  
    &.is-active {
      .panel-icon {
        color: $link-active;
      }
    }
  }
  
  .tabs {
    a {
      border-bottom-width: $border-width;
      margin-bottom: -$border-width;
    }
  
    ul {
      border-bottom-width: $border-width;
    }
  
    &.is-boxed {
      a {
        border-width: $border-width;
      }
  
      li.is-active a {
        background-color: darken($grey-darker, 4);
      }
    }
  
    &.is-toggle {
      li a {
        border-width: $border-width;
        margin-bottom: 0;
      }
  
      li + li {
        margin-left: -$border-width;
      }
    }
  }
  
  .hero {
    // Colors
    @each $name, $pair in $colors {
      $color: nth($pair, 1);
      $color-invert: nth($pair, 2);
  
      &.is-#{$name} {
        .navbar {
          .navbar-dropdown {
            .navbar-item:hover {
              background-color: $navbar-dropdown-item-hover-background-color;
            }
          }
        }
      }
    }
  }