.table_tools {
  margin-bottom: 20px;
  @include clearfix;

  .dropdown_menu {
    margin-right: 20px;
    float: left;
  }

  // Scopes
  .scopes {
    float: left !important;
    width: auto !important;
  }

  .scopes {
    background-color: $white;
    border: 1px solid $silver;
    border-radius: $radius;
    box-shadow: 0 0 5px rgba($black, 0.05);
    font-size: 14px;
    list-style: none;
    margin: 0;
    overflow: hidden;
    padding: 0;

    @include clearfix;
  }

  .scope {
    float: left;
    font-weight: bold;
    text-align: center;

    &.selected a {
      background-color: $white;
      background-image: linear-gradient(to bottom, shade($white, 5%), $white);
      color: $black;

      .count {
        opacity: 0.75;
      }
    }

    a {
      background-color: $white;
      background-image: linear-gradient(to bottom, $white, shade($white, 5%));
      box-shadow: inset 0 1px 0 0 $white;
      display: block;
      padding: 12px 16px;
      text-decoration: none;
    }

    &:not(.selected) a:hover {
      background: $white;
    }

    .count {
      font-weight: normal;
      letter-spacing: -1px;
      opacity: 0.5;
    }

    + .scope {
      border-left: 1px solid $silver;
    }
  }

  // Media
  @media #{$phone-screen} {
    margin-bottom: 20px;
    text-align: center;

    .batch_actions_selector,
    .scopes {
      float: none;
      margin: 0 0 20px;
    }

    .scopes,
    .scope {
      float: none !important;
      width: 100% !important;
    }

    .scope + .scope {
      border-top: 1px solid $silver;
      border-left: 0;
    }
  }
}
