@mixin contribution-heatmap {
  div {
    h4.total-contributions {}
    svg.vch__wrapper {
      g.vch__months__labels__wrapper {
        text.vch__month__label {
          fill: $white-dark;
        }
      }
      g.vch__days__labels__wrapper {
        text.vch__day__label {
          fill: $white-dark;
        }
      }
      g.vch__legend__wrapper {
        text {
          fill: $white-dark;
        }
        rect {
          @include contribution-heatmap-colors;
        }
      }
      g.vch__year__wrapper {
        g.vch__month__wrapper {
          rect.vch__day__square {
            @include contribution-heatmap-colors;
          }
        }
      }
    }
  }
}

@mixin contribution-heatmap-colors {
  &[style*="fill: rgb(244, 244, 244);"] {
    fill: $bg50 !important;
  }
  &[style*="fill: rgb(216, 239, 191);"] {
    fill: $bg60 !important;
  }
  &[style*="fill: rgb(159, 219, 129);"] {
    fill: $bg70 !important;
  }
  &[style*="fill: rgb(102, 199, 75);"] {
    fill: $bg80 !important;
  }
  &[style*="fill: rgb(96, 153, 38);"] {
    fill: $red-dark !important;
  }
  &[style*="fill: rgb(2, 89, 0);"] {
    fill: $red !important;
  }
}

@mixin label-milestone-menu {
  .left.small.menu {
    background: transparent;
    border: 0;
    .item {
      background: $bg60;
      color: $white;
      font-family: $font-family;
      &:first-child {
        border-radius: $border-radius 0 0 $border-radius;
      }
      &:hover {
        background: $bg50;
      }
      &:last-child {
        border-radius: 0 $border-radius $border-radius 0;
      }
      &.active {
        background: $bg50;
      }
    }
  }
}

@mixin open-closed-buttons {
  .basic.button {
    font-family: $font-family;
    &:not(.active) {
      background: $bg60;
      color: $white;
      &:hover {
        background: $bg50;
      }
    }
    &.green {
      background: $green;
      box-shadow: none;
      color: $white-light;
      &:hover {
        background: $green-dark;
      }
    }
    &.red {
      background: $red;
      box-shadow: none;
      color: $white-light;
      &:hover {
        background: $red-dark;
      }
    }
    .svg {
      @if $nojavascript == true {
        display: none;
      }
    }
  }
}

@mixin search-issues {
  form.form {
    .input {
      input {
        background: $bg40;
        border: 2px solid $bg60;
        color: $white;
        font-family: $font-family;
        &:focus {
          background: $bg50;
          border: 2px solid $bg60;
          color: $white;
        }
      }
      .button {
        background: $bg60;
        border: 0;
        font-family: $font-family;
        &:hover {
          background: $bg50;
        }
      }
    }
  }
}

@mixin issue-list {
  .issue.list {
    .item {
      border-bottom: 1px dashed $bg70;
      .label {
        background: $white;
        color: $bg60;
      }
      .title {
        border-bottom: 1px solid transparent;
        color: $white;
        transition: border .2s, color .2s;
        &:hover {
          border-bottom: 1px solid $red;
          color: $red;
        }
      }
      .desc {
        color: $white-dark;
        a.milestone {
          color: $white !important;
          &:hover {
            color: $red !important;
          }
        }
      }
    }
  }
}

@mixin dropdown {
  .dropdown {
    background: $bg60;
    border-radius: $border-radius;
    color: $white;
    padding: 10px 0 10px 13px;
    &:first-of-type {
      margin-left: auto;
    }
    &:hover {
      background: $bg50;
      .menu {
        @if $nojavascript == true {
          display: block;
        }
      }
    }
    span.text {
      i.dropdown.icon {
        padding: 0;
      }
    }
    .menu {
      background: $bg60;
      border: 1px solid $bg50;
      box-shadow: none;
      margin-top: 0;
      .item {
        color: $white !important;
        &:hover {
          background: $bg50;
        }
      }
    }
  }
}

@mixin dropdown-floating {
  .dropdown.floating {
    &:hover {
      .context.user.menu {
        display: none;
      }
    }
    .text {
      color: $white;
    }
    .context.user.menu {
      background: $bg50;
      .header {
        color: $white;
      }
      .scrolling.menu.items {
        border: 0;
      }
      .item {
        border-radius: 0;
        color: $white !important;
        &:hover {
          background: $bg40;
        }
        &.active {
          background: $bg40 !important;
          &:hover {
            background: $bg30 !important;
          }
        }
      }
    }
  }
}