.hub-actions {
  margin-top: $gutter-half;

  ul {
    overflow: hidden;
    margin-bottom: -$gutter-half;

    li {
      margin-bottom: $gutter;
    }

    a {
      position: relative;
      display: block;
      @include box-sizing(border-box);
      width: 100%;
      height: 200px;
      background-color: $house-of-commons-green;
      padding: $gutter-half;
      color: $white;
      @include bold-27;

      .count {
        @include bold-48;
        display: block;
        margin-bottom: $gutter * 2;
      }

      .graphic {
        position: absolute;
        top: $gutter-half;
        right: $gutter-two-thirds;
      }

      &:hover {
        background-color: darken($house-of-commons-green, 5%);
        text-decoration: none;
      }

      &:focus {
        background-color: $focus-colour;
        outline: none;
      }
    }
  }

  .moderation {
    overflow: hidden;
    margin-left: $gutter-half;
    margin-right: $gutter-half;

    .queue-stable a {
      background-color: $house-of-commons-green;

      &:hover {
        background-color: darken($house-of-commons-green, 5%);
      }
    }

    .queue-caution a {
      background-color: $caution;

      &:hover {
        background-color: darken($caution, 5%);
      }
    }

    .queue-danger a {
      background-color: $danger;

      &:hover {
        background-color: darken($danger, 5%);
      }
    }

    .panel {
      height: 200px;
      color: $white;

      @include media(tablet) {
        float: left;
        width: 50%;
      }

      margin-bottom: $gutter;

      a {
        color: $white;
        display: block;
        height: 100%;

        &:hover {
          text-decoration: none;
        }

        &:focus {
          outline: none;
        }
      }

      .summary {
        @include bold-27;
      }

      .details {
        .label {
          float: right;
        }

        small {
          @include core-14;
          line-height: 40px;
          float: right;
          margin-right: $gutter-half;
        }

        .tagged-in-moderation a {
          background-color: $grey-1;
          color: $white;

          &:hover {
            background-color: darken($grey-1, 5%);
          }
        }

        .untagged-in-moderation a {
          background-color: $grey-3;
          color: $black;

          &:hover {
            background-color: darken($grey-3, 5%);
          }
        }

        div {
          line-height: 40px;
          height: 40px;
        }

        a {
          padding-right: $gutter-half;
          padding-left: $gutter-half;
        }
      }

      .count {
        @include bold-48;
        display: block;
        margin-bottom: $gutter * 2;
      }

      .summary {
        padding-top: $gutter-half;
        padding-left: $gutter-half;
      }
    }
  }
}

.hub-links {
  text-align: right;
}
